@urbicon-ui/blocks 6.1.4

package/dist/mint/micro-interactions.d.ts

@@ -0,0 +1,11 @@
+import type { mintRegistry } from './registry';
+import type { MicroInteractionConfig, Mint } from './types';
+/**
+ * Generic micro-interaction factory
+ */
+export declare function createMicroInteraction(className: string, defaultConfig?: MicroInteractionConfig): Mint<MicroInteractionConfig>;
+/**
+ * Register all default micro-interaction mints.
+ * Called by registerDefaultMints() - not at module level.
+ */
+export declare function registerMicroInteractions(registry: typeof mintRegistry): void;

package/dist/mint/micro-interactions.js

@@ -0,0 +1,156 @@
+/**
+ * Check if user prefers reduced motion
+ */
+function prefersReducedMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Generic micro-interaction factory
+ */
+export function createMicroInteraction(className, defaultConfig = {}) {
+    return {
+        init(el, config = {}) {
+            // Merge default config with provided config
+            const finalConfig = { ...defaultConfig, ...config };
+            // Skip if disabled or prefers reduced motion
+            if (finalConfig.disabled || prefersReducedMotion())
+                return;
+            const trigger = finalConfig.trigger || 'hover';
+            const duration = finalConfig.duration || 200;
+            const delay = finalConfig.delay || 0;
+            // Determine event based on trigger
+            const eventMap = {
+                hover: 'mouseenter',
+                click: 'click',
+                focus: 'focus',
+                load: 'load'
+            };
+            const event = eventMap[trigger] || 'mouseenter';
+            const handler = () => {
+                // Skip if this specific animation is already running
+                const animatingAttr = `data-animating-${className}`;
+                if (el.getAttribute(animatingAttr) === 'true')
+                    return;
+                // Apply delay if specified
+                const applyAnimation = () => {
+                    el.setAttribute(animatingAttr, 'true');
+                    // Add dynamic styles if intensity is specified
+                    if (finalConfig.intensity && className.includes('scale')) {
+                        el.style.setProperty('--scale-intensity', finalConfig.intensity.toString());
+                    }
+                    el.classList.add(className);
+                    const cleanup = () => {
+                        el.classList.remove(className);
+                        el.removeAttribute(animatingAttr);
+                        el.style.removeProperty('--scale-intensity');
+                        el.removeEventListener('animationend', cleanup);
+                        el.removeEventListener('transitionend', cleanup);
+                    };
+                    el.addEventListener('animationend', cleanup, { once: true });
+                    el.addEventListener('transitionend', cleanup, { once: true });
+                    // Fallback timeout
+                    setTimeout(cleanup, duration + 50);
+                };
+                if (delay > 0) {
+                    setTimeout(applyAnimation, delay);
+                }
+                else {
+                    applyAnimation();
+                }
+            };
+            // Special handling for load trigger
+            if (trigger === 'load') {
+                // Execute immediately if element is already loaded
+                requestAnimationFrame(() => handler());
+            }
+            else {
+                el.addEventListener(event, handler, { passive: true });
+            }
+            // Store cleanup function
+            this.destroy = () => {
+                if (event !== 'load') {
+                    el.removeEventListener(event, handler);
+                }
+            };
+        }
+    };
+}
+/**
+ * Register all default micro-interaction mints.
+ * Called by registerDefaultMints() - not at module level.
+ */
+export function registerMicroInteractions(registry) {
+    registry.register('scale', (config) => createMicroInteraction('blocks-mint-scale', {
+        trigger: 'hover',
+        duration: 200,
+        ...config
+    }));
+    registry.register('translate', (config) => createMicroInteraction('blocks-mint-translate', {
+        trigger: 'hover',
+        duration: 200,
+        ...config
+    }));
+    registry.register('rotate', (config) => createMicroInteraction('blocks-mint-rotate', {
+        trigger: 'hover',
+        duration: 200,
+        ...config
+    }));
+    registry.register('glow', (config) => createMicroInteraction('blocks-mint-glow', {
+        trigger: 'hover',
+        duration: 300,
+        ...config
+    }));
+    registry.register('bounce', (config) => createMicroInteraction('blocks-mint-bounce', {
+        trigger: 'click',
+        duration: 600,
+        ...config
+    }));
+    registry.register('pulse', (config) => ({
+        init(el, inputConfig = {}) {
+            const finalConfig = { trigger: 'hover', ...config, ...inputConfig };
+            if (finalConfig.disabled || prefersReducedMotion())
+                return;
+            const trigger = finalConfig.trigger || 'hover';
+            if (trigger === 'hover') {
+                let isHovering = false;
+                const startPulse = () => {
+                    if (!isHovering) {
+                        isHovering = true;
+                        el.classList.add('blocks-mint-pulse');
+                    }
+                };
+                const stopPulse = () => {
+                    if (isHovering) {
+                        isHovering = false;
+                        el.classList.remove('blocks-mint-pulse');
+                    }
+                };
+                el.addEventListener('mouseenter', startPulse, { passive: true });
+                el.addEventListener('mouseleave', stopPulse, { passive: true });
+                this.destroy = () => {
+                    el.removeEventListener('mouseenter', startPulse);
+                    el.removeEventListener('mouseleave', stopPulse);
+                    stopPulse();
+                };
+            }
+            else {
+                const standardPulse = createMicroInteraction('blocks-mint-pulse', {
+                    trigger: trigger,
+                    duration: 1000,
+                    ...config
+                });
+                return standardPulse.init(el, inputConfig);
+            }
+        }
+    }));
+    registry.register('shake', (config) => createMicroInteraction('blocks-mint-shake', {
+        trigger: 'click',
+        duration: 500,
+        ...config
+    }));
+    registry.register('wiggle', (config) => createMicroInteraction('blocks-mint-wiggle', {
+        trigger: 'hover',
+        duration: 500,
+        ...config
+    }));
+}

package/dist/mint/presets.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Register all default mints (scale, translate, rotate, glow, bounce, pulse, shake, ripple, composite).
+ * Safe to call multiple times – subsequent calls are no-ops.
+ */
+export declare function registerDefaultMints(): void;
+/**
+ * Register playful mints bundle.
+ *
+ * `bounce`, `shake`, `pulse` and `wiggle` are part of `registerDefaultMints()`
+ * (with `prefers-reduced-motion` awareness and proper cleanup). This function
+ * is reserved for future playful-only mints; calling it is currently a no-op.
+ */
+export declare function registerPlayfulMints(): void;
+/**
+ * Register business mints bundle
+ */
+export declare function registerBusinessMints(): void;
+export declare const mintPresets: {
+    readonly 'cta-primary': readonly [{
+        readonly name: "scale";
+        readonly config: {
+            readonly intensity: 1.05;
+        };
+    }, {
+        readonly name: "glow";
+        readonly config: {
+            readonly duration: 300;
+        };
+    }];
+    readonly 'interactive-card': readonly [{
+        readonly name: "translate";
+        readonly config: {
+            readonly trigger: "hover";
+        };
+    }, "glow"];
+    readonly 'playful-button': readonly [{
+        readonly name: "bounce";
+        readonly config: {
+            readonly trigger: "click";
+        };
+    }, "ripple"];
+    readonly 'subtle-hover': readonly [{
+        readonly name: "scale";
+        readonly config: {
+            readonly intensity: 1.02;
+            readonly duration: 150;
+        };
+    }];
+    readonly 'error-feedback': readonly [{
+        readonly name: "shake";
+        readonly config: {
+            readonly trigger: "click";
+        };
+    }];
+};

package/dist/mint/presets.js

@@ -0,0 +1,54 @@
+import { registerComposite } from './compose';
+import { registerMicroInteractions } from './micro-interactions';
+import { mintRegistry } from './registry';
+import { registerRipple } from './ripple';
+let defaultMintsRegistered = false;
+/**
+ * Register all default mints (scale, translate, rotate, glow, bounce, pulse, shake, ripple, composite).
+ * Safe to call multiple times – subsequent calls are no-ops.
+ */
+export function registerDefaultMints() {
+    if (defaultMintsRegistered)
+        return;
+    defaultMintsRegistered = true;
+    registerMicroInteractions(mintRegistry);
+    registerRipple(mintRegistry);
+    registerComposite(mintRegistry);
+}
+/**
+ * Register playful mints bundle.
+ *
+ * `bounce`, `shake`, `pulse` and `wiggle` are part of `registerDefaultMints()`
+ * (with `prefers-reduced-motion` awareness and proper cleanup). This function
+ * is reserved for future playful-only mints; calling it is currently a no-op.
+ */
+export function registerPlayfulMints() {
+    // Reserved for future playful-only mints.
+}
+/**
+ * Register business mints bundle
+ */
+export function registerBusinessMints() {
+    // Subtle mints for professional UIs
+    mintRegistry.register('fade', () => ({
+        init(el) {
+            el.classList.add('blocks-mint-fade');
+        }
+    }));
+    mintRegistry.register('slide', () => ({
+        init(el) {
+            el.classList.add('blocks-mint-slide');
+        }
+    }));
+}
+// Mint presets for common UI patterns
+export const mintPresets = {
+    'cta-primary': [
+        { name: 'scale', config: { intensity: 1.05 } },
+        { name: 'glow', config: { duration: 300 } }
+    ],
+    'interactive-card': [{ name: 'translate', config: { trigger: 'hover' } }, 'glow'],
+    'playful-button': [{ name: 'bounce', config: { trigger: 'click' } }, 'ripple'],
+    'subtle-hover': [{ name: 'scale', config: { intensity: 1.02, duration: 150 } }],
+    'error-feedback': [{ name: 'shake', config: { trigger: 'click' } }]
+};

package/dist/mint/registry.d.ts

@@ -0,0 +1,23 @@
+import type { MintConfig, MintFactory, MintProp } from './types';
+declare class MintRegistry {
+    private mints;
+    private instances;
+    /** Register a mint globally */
+    register<TConfig extends MintConfig = MintConfig>(name: string, factory: MintFactory<TConfig>): void;
+    /** Get a mint factory by name */
+    get(name: string): MintFactory | undefined;
+    /** Check if a mint is registered */
+    has(name: string): boolean;
+    /** Apply mints to an element using polymorphic input */
+    apply(el: HTMLElement, mint: MintProp): () => void;
+    /** Normalize polymorphic mint prop to consistent format */
+    private normalizeMintProp;
+    /** Update mint config for an element */
+    update(el: HTMLElement, name: string, config: MintConfig): void;
+    /** List all registered mint names */
+    list(): string[];
+    /** Clear all mints */
+    clear(): void;
+}
+export declare const mintRegistry: MintRegistry;
+export {};

package/dist/mint/registry.js

@@ -0,0 +1,79 @@
+class MintRegistry {
+    mints = new Map();
+    instances = new WeakMap();
+    /** Register a mint globally */
+    register(name, factory) {
+        this.mints.set(name, factory);
+    }
+    /** Get a mint factory by name */
+    get(name) {
+        return this.mints.get(name);
+    }
+    /** Check if a mint is registered */
+    has(name) {
+        return this.mints.has(name);
+    }
+    /** Apply mints to an element using polymorphic input */
+    apply(el, mint) {
+        const mintDefinitions = this.normalizeMintProp(mint);
+        const elementMints = new Map();
+        const cleanupFunctions = [];
+        mintDefinitions.forEach((mintDef) => {
+            const name = typeof mintDef === 'string' ? mintDef : mintDef.name;
+            const config = typeof mintDef === 'object' ? mintDef.config : undefined;
+            const factory = this.get(name);
+            if (!factory) {
+                console.warn(`[MintRegistry] Unknown mint: ${name}`);
+                return;
+            }
+            const mintInstance = factory(config);
+            mintInstance.init(el, config);
+            elementMints.set(name, mintInstance);
+            // Create cleanup function
+            const cleanup = () => {
+                mintInstance.destroy?.(el);
+                elementMints.delete(name);
+            };
+            cleanupFunctions.push(cleanup);
+        });
+        this.instances.set(el, elementMints);
+        // Return combined cleanup function
+        return () => {
+            cleanupFunctions.forEach((fn) => {
+                fn();
+            });
+            this.instances.delete(el);
+        };
+    }
+    /** Normalize polymorphic mint prop to consistent format */
+    normalizeMintProp(mint) {
+        if (typeof mint === 'string') {
+            return [mint];
+        }
+        if (Array.isArray(mint)) {
+            return mint;
+        }
+        if (mint && typeof mint === 'object' && 'name' in mint && typeof mint.name === 'string') {
+            return [mint];
+        }
+        return [];
+    }
+    /** Update mint config for an element */
+    update(el, name, config) {
+        const elementMints = this.instances.get(el);
+        const mint = elementMints?.get(name);
+        if (mint?.update) {
+            mint.update(el, config);
+        }
+    }
+    /** List all registered mint names */
+    list() {
+        return Array.from(this.mints.keys());
+    }
+    /** Clear all mints */
+    clear() {
+        this.mints.clear();
+    }
+}
+// Singleton instance
+export const mintRegistry = new MintRegistry();

package/dist/mint/ripple.d.ts

@@ -0,0 +1,11 @@
+import type { mintRegistry } from './registry';
+import type { Mint, RippleConfig } from './types';
+/**
+ * Material Design inspired ripple effect
+ */
+export declare function createRippleMint(defaultConfig?: RippleConfig): Mint<RippleConfig>;
+/**
+ * Register the ripple mint.
+ * Called by registerDefaultMints() - not at module level.
+ */
+export declare function registerRipple(registry: typeof mintRegistry): void;

package/dist/mint/ripple.js

@@ -0,0 +1,72 @@
+/**
+ * Material Design inspired ripple effect
+ */
+export function createRippleMint(defaultConfig = {}) {
+    return {
+        init(el, config = {}) {
+            // Merge configs
+            const finalConfig = { ...defaultConfig, ...config };
+            if (finalConfig.disabled)
+                return;
+            // Ensure position context
+            const position = window.getComputedStyle(el).position;
+            if (position === 'static') {
+                el.style.position = 'relative';
+            }
+            // Ensure overflow hidden
+            el.style.overflow = 'hidden';
+            const handleRipple = (event) => {
+                // Respect prefers-reduced-motion at click time so the user can
+                // toggle the OS setting without re-mounting components.
+                if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+                    return;
+                // Throttle ripples
+                if (el.querySelector('.blocks-mint-ripple'))
+                    return;
+                const rect = el.getBoundingClientRect();
+                const size = finalConfig.size || Math.max(rect.width, rect.height) * 2;
+                const x = event.clientX - rect.left - size / 2;
+                const y = event.clientY - rect.top - size / 2;
+                const ripple = document.createElement('span');
+                ripple.className = 'blocks-mint-ripple';
+                ripple.style.cssText = `
+          position: absolute;
+          border-radius: 50%;
+          background: ${finalConfig.color || 'currentColor'};
+          opacity: ${finalConfig.opacity || 0.2};
+          pointer-events: none;
+          width: ${size}px;
+          height: ${size}px;
+          left: ${x}px;
+          top: ${y}px;
+          transform: scale(0);
+          will-change: transform, opacity;
+        `;
+                el.appendChild(ripple);
+                // Use Web Animations API for better performance
+                const animation = ripple.animate([
+                    { transform: 'scale(0)', opacity: finalConfig.opacity || 0.2 },
+                    { transform: 'scale(1)', opacity: 0 }
+                ], {
+                    duration: finalConfig.duration || 600,
+                    easing: finalConfig.easing || 'cubic-bezier(0.4, 0, 0.2, 1)', // matches --blocks-ease-confident
+                    fill: 'forwards'
+                });
+                animation.addEventListener('finish', () => {
+                    ripple.remove();
+                });
+            };
+            el.addEventListener('click', handleRipple, { passive: true });
+            this.destroy = () => {
+                el.removeEventListener('click', handleRipple);
+            };
+        }
+    };
+}
+/**
+ * Register the ripple mint.
+ * Called by registerDefaultMints() - not at module level.
+ */
+export function registerRipple(registry) {
+    registry.register('ripple', createRippleMint);
+}

package/dist/mint/styles.css

@@ -0,0 +1,188 @@
+/* === MINT MICRO-INTERACTION STYLES (XC-12) === */
+
+/* Mint-system tokens. `--blocks-mint-glow-color` is the single source of
+   truth for the `glow` effect — components and consumers set it on
+   themselves to make the glow intent-aware (e.g. red on danger, green
+   on success). Defaults to the primary intent so unannotated buttons
+   still light up sensibly. */
+:root {
+  --blocks-mint-scale-intensity: 1.04;
+  --blocks-mint-glow-color: color-mix(in oklch, var(--color-primary) 50%, transparent);
+  --blocks-mint-glow-radius: 20px;
+
+  /* Legacy aliases retained one minor cycle for downstream code that may
+     still consume the old names; will be dropped before v1.0. */
+  --scale-intensity: var(--blocks-mint-scale-intensity);
+  --glow-color: var(--blocks-mint-glow-color);
+}
+
+/* Per-intent glow color. The `.blocks-intent-{name}` hook is set by
+   components that propagate `intent` to their root element; without
+   that hook the primary default applies. */
+.blocks-intent-primary {
+  --blocks-mint-glow-color: color-mix(in oklch, var(--color-primary) 50%, transparent);
+}
+.blocks-intent-secondary {
+  --blocks-mint-glow-color: color-mix(in oklch, var(--color-secondary) 50%, transparent);
+}
+.blocks-intent-success {
+  --blocks-mint-glow-color: color-mix(in oklch, var(--color-success) 50%, transparent);
+}
+.blocks-intent-warning {
+  --blocks-mint-glow-color: color-mix(in oklch, var(--color-warning) 50%, transparent);
+}
+.blocks-intent-danger {
+  --blocks-mint-glow-color: color-mix(in oklch, var(--color-danger) 50%, transparent);
+}
+.blocks-intent-neutral {
+  --blocks-mint-glow-color: color-mix(in oklch, var(--color-neutral) 40%, transparent);
+}
+
+/* Transform-based interactions */
+.blocks-mint-scale {
+  transform: scale(var(--blocks-mint-scale-intensity, 1.05));
+  transition: transform var(--blocks-duration-fast) var(--blocks-ease-confident);
+}
+
+.blocks-mint-translate {
+  transform: translateY(-2px);
+  transition: transform var(--blocks-duration-fast) var(--blocks-ease-confident);
+}
+
+.blocks-mint-rotate {
+  transform: rotate(2deg);
+  transition: transform var(--blocks-duration-fast) var(--blocks-ease-confident);
+}
+
+/* Visual effects */
+.blocks-mint-glow {
+  box-shadow: 0 0 var(--blocks-mint-glow-radius) var(--blocks-mint-glow-color);
+  transition: box-shadow var(--blocks-duration-normal) var(--blocks-ease-confident);
+}
+
+.blocks-mint-fade {
+  opacity: 0.8;
+  transition: opacity var(--blocks-duration-fast) ease;
+}
+
+.blocks-mint-fade:hover {
+  opacity: 1;
+}
+
+.blocks-mint-slide {
+  transform: translateX(0);
+  transition: transform var(--blocks-duration-normal) ease;
+}
+
+/* Animation-based interactions */
+.blocks-mint-bounce {
+  animation: blocks-mint-bounce var(--blocks-duration-slower) var(--blocks-ease-springy);
+}
+
+.blocks-mint-pulse {
+  animation: blocks-mint-pulse var(--blocks-duration-slowest) var(--blocks-ease-smooth) infinite;
+}
+
+.blocks-mint-shake {
+  animation: blocks-mint-shake var(--blocks-duration-slower) var(--blocks-ease-confident);
+}
+
+.blocks-mint-wiggle {
+  animation: blocks-mint-wiggle var(--blocks-duration-slower) ease-in-out;
+}
+
+/* === KEYFRAME ANIMATIONS === */
+
+@keyframes blocks-mint-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes blocks-mint-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+@keyframes blocks-mint-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+
+@keyframes blocks-mint-wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-3deg);
+  }
+  75% {
+    transform: rotate(3deg);
+  }
+}
+
+/* === RIPPLE EFFECT (XC-12) ===
+   The active ripple effect is created dynamically by `mint/ripple.ts` —
+   a `<span class="blocks-mint-ripple">` is appended to the host element
+   on click with inline styles for position/size/opacity, then animated
+   via the Web Animations API. No standing CSS rule is needed; PAG-1
+   removed the previous `.blocks-mint-ripple::before` pseudo-implementation
+   which conflicted with the JS-generated span's class. */
+
+/* === ACCESSIBILITY & REDUCED MOTION === */
+
+@media (prefers-reduced-motion: reduce) {
+  .blocks-mint-scale,
+  .blocks-mint-translate,
+  .blocks-mint-rotate,
+  .blocks-mint-glow,
+  .blocks-mint-fade,
+  .blocks-mint-slide {
+    transition: none !important;
+    transform: none !important;
+    box-shadow: none !important;
+    animation: none !important;
+  }
+
+  .blocks-mint-bounce,
+  .blocks-mint-pulse,
+  .blocks-mint-shake,
+  .blocks-mint-wiggle {
+    animation: none !important;
+  }
+
+  /* JS-generated ripple span — never animate when motion is reduced. */
+  .blocks-mint-ripple {
+    display: none !important;
+  }
+}
+
+/* === HIGH CONTRAST MODE === */
+
+@media (prefers-contrast: high) {
+  .blocks-mint-glow {
+    box-shadow: 0 0 0 2px currentColor;
+  }
+
+  .blocks-mint-fade {
+    opacity: 1;
+  }
+}

package/dist/mint/svelte.d.ts

@@ -0,0 +1,12 @@
+import type { MintProp } from './types';
+/**
+ * Svelte 5 action for mints
+ */
+export declare function mint(node: HTMLElement, params: MintProp): {
+    update(newParams: MintProp): void;
+    destroy(): void;
+};
+/**
+ * Svelte 5 composable for mints
+ */
+export declare function useMint(element: HTMLElement | undefined, mints: MintProp): void;