eidotter 0.36.1 → 0.37.0

package/dist/hooks/useTextScramble.js

@@ -0,0 +1,91 @@
+import { useState, useEffect, useRef } from 'react';
+import { prefersReducedMotion } from '../utils/prefersReducedMotion.js';
+const DEFAULT_CHARACTERS = '░▒▓█│┤┐└┴┬├─┼';
+const CYCLES_PER_CHAR = 4;
+/**
+ * Hook that animates text with a DOS-style character scramble effect.
+ * Characters resolve left-to-right (CRT beam metaphor).
+ *
+ * Note: Changing `speed`, `characters`, or `delay` mid-animation
+ * will restart the scramble from position 0.
+ */
+export function useTextScramble(targetText, options) {
+    const { speed = 40, characters = DEFAULT_CHARACTERS, enabled = true, delay = 0, } = options ?? {};
+    // Initialize with scrambled chars (not empty) to avoid a blank frame
+    const [display, setDisplay] = useState(() => {
+        if (!enabled || prefersReducedMotion())
+            return targetText;
+        let result = '';
+        for (let i = 0; i < targetText.length; i++) {
+            if (targetText[i] === ' ') {
+                result += ' ';
+            }
+            else {
+                result += characters[Math.floor(Math.random() * characters.length)];
+            }
+        }
+        return result;
+    });
+    const [isScrambling, setIsScrambling] = useState(false);
+    const rafRef = useRef(0);
+    useEffect(() => {
+        // Skip animation if disabled or reduced motion
+        if (!enabled || prefersReducedMotion()) {
+            setDisplay(targetText);
+            setIsScrambling(false);
+            return;
+        }
+        // Track position (which char index we've resolved up to)
+        let resolvedCount = 0;
+        let cycleCount = 0;
+        let lastTime = 0;
+        let delayRemaining = delay;
+        setIsScrambling(true);
+        const animate = (time) => {
+            if (!lastTime)
+                lastTime = time;
+            const delta = time - lastTime;
+            if (delayRemaining > 0) {
+                delayRemaining -= delta;
+                lastTime = time;
+                rafRef.current = requestAnimationFrame(animate);
+                return;
+            }
+            if (delta >= speed) {
+                lastTime = time;
+                cycleCount++;
+                if (cycleCount >= CYCLES_PER_CHAR) {
+                    resolvedCount++;
+                    cycleCount = 0;
+                }
+                if (resolvedCount >= targetText.length) {
+                    setDisplay(targetText);
+                    setIsScrambling(false);
+                    return;
+                }
+                // Build display string: resolved chars + scrambled chars
+                let result = '';
+                for (let i = 0; i < targetText.length; i++) {
+                    if (i < resolvedCount) {
+                        result += targetText[i];
+                    }
+                    else if (targetText[i] === ' ') {
+                        result += ' ';
+                    }
+                    else {
+                        result += characters[Math.floor(Math.random() * characters.length)];
+                    }
+                }
+                setDisplay(result);
+            }
+            rafRef.current = requestAnimationFrame(animate);
+        };
+        rafRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+            }
+        };
+    }, [targetText, speed, characters, enabled, delay]);
+    return { text: display, isScrambling };
+}

package/dist/hooks/useTextScramble.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useThemePortal.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Creates a portal container on document.body that inherits the nearest
+ * ancestor's `data-theme` attribute. A MutationObserver keeps it in sync
+ * for dynamic theme changes.
+ *
+ * @param sourceRef - Ref to an element rendered in the normal React tree.
+ *   Its nearest `[data-theme]` ancestor determines the portal's theme.
+ * @returns The portal container element, or `null` during SSR.
+ *
+ * @internal Not exported from the public API.
+ */
+export declare function useThemePortal(sourceRef: React.RefObject<HTMLElement | null>): HTMLDivElement | null;

package/dist/hooks/useThemePortal.js

@@ -0,0 +1,62 @@
+import { useRef, useEffect } from 'react';
+/**
+ * Creates a portal container on document.body that inherits the nearest
+ * ancestor's `data-theme` attribute. A MutationObserver keeps it in sync
+ * for dynamic theme changes.
+ *
+ * @param sourceRef - Ref to an element rendered in the normal React tree.
+ *   Its nearest `[data-theme]` ancestor determines the portal's theme.
+ * @returns The portal container element, or `null` during SSR.
+ *
+ * @internal Not exported from the public API.
+ */
+export function useThemePortal(sourceRef) {
+    // SSR guard
+    if (typeof document === 'undefined')
+        return null;
+    // Lazy-init so createPortal has a target during the first render.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const containerRef = useRef(null);
+    if (!containerRef.current) {
+        const el = document.createElement('div');
+        el.setAttribute('data-eidotter-portal', '');
+        containerRef.current = el;
+    }
+    // Mount / unmount the container on document.body.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        const container = containerRef.current;
+        document.body.appendChild(container);
+        return () => {
+            container.remove();
+        };
+    }, []);
+    // Sync data-theme from the nearest themed ancestor.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        const source = sourceRef.current;
+        const container = containerRef.current;
+        if (!source)
+            return;
+        const themedAncestor = source.closest('[data-theme]');
+        function syncTheme() {
+            const value = themedAncestor?.getAttribute('data-theme');
+            if (value) {
+                container.setAttribute('data-theme', value);
+            }
+            else {
+                container.removeAttribute('data-theme');
+            }
+        }
+        syncTheme();
+        if (!themedAncestor)
+            return;
+        const observer = new MutationObserver(syncTheme);
+        observer.observe(themedAncestor, {
+            attributes: true,
+            attributeFilter: ['data-theme'],
+        });
+        return () => observer.disconnect();
+    }, [sourceRef]);
+    return containerRef.current;
+}

package/dist/hooks/useThemePortal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/cn.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Merge Tailwind CSS classes with conflict resolution.
+ * Wraps tailwind-merge for consistent class merging across eidotter components.
+ *
+ * @example
+ * cn('bg-dos-bg-primary text-dos-text-primary', 'bg-dos-bg-secondary')
+ * // → 'text-dos-text-primary bg-dos-bg-secondary'
+ */
+export declare function cn(...inputs: (string | undefined | null | false)[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,12 @@
+import { twMerge } from 'tailwind-merge';
+/**
+ * Merge Tailwind CSS classes with conflict resolution.
+ * Wraps tailwind-merge for consistent class merging across eidotter components.
+ *
+ * @example
+ * cn('bg-dos-bg-primary text-dos-text-primary', 'bg-dos-bg-secondary')
+ * // → 'text-dos-text-primary bg-dos-bg-secondary'
+ */
+export function cn(...inputs) {
+    return twMerge(inputs.filter(Boolean));
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { isSafeUrl } from './isSafeUrl.js';
+export { prefersReducedMotion } from './prefersReducedMotion.js';

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export { isSafeUrl } from './isSafeUrl.js';
+export { prefersReducedMotion } from './prefersReducedMotion.js';

package/dist/utils/isSafeHref.d.ts

@@ -0,0 +1 @@
+export declare function isSafeHref(href: string): boolean;

package/dist/utils/isSafeHref.js

@@ -0,0 +1,22 @@
+/**
+ * Validate that a URL string is safe to use as an anchor href.
+ *
+ * Allows: http://, https://, mailto:, and relative URLs (no scheme).
+ * Blocks: javascript:, data:, vbscript:, file:, and other unsafe schemes.
+ *
+ * Used to guard `<a href={...}>` against author-supplied URLs (e.g. MDX or
+ * JSON content). Returns the input unchanged when safe so callers can pass
+ * it directly into href; returns false to signal the link should be dropped.
+ */
+const SAFE_SCHEME_PATTERN = /^(?:https?:|mailto:)/i;
+export function isSafeHref(href) {
+    if (typeof href !== 'string')
+        return false;
+    const trimmed = href.trim();
+    if (trimmed.length === 0)
+        return false;
+    // Relative URLs (no scheme) are safe.
+    if (!/^[a-z][a-z0-9+\-.]*:/i.test(trimmed))
+        return true;
+    return SAFE_SCHEME_PATTERN.test(trimmed);
+}

package/dist/utils/isSafeUrl.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Validates that a URL uses a safe protocol (http, https, or mailto).
+ * Blocks javascript:, data:, vbscript:, blob:, and other dangerous protocols.
+ *
+ * @param url - URL string to validate
+ * @returns true if the URL uses an allowed protocol
+ */
+export declare const isSafeUrl: (url: string | undefined) => boolean;

package/dist/utils/isSafeUrl.js

@@ -0,0 +1,18 @@
+/**
+ * Validates that a URL uses a safe protocol (http, https, or mailto).
+ * Blocks javascript:, data:, vbscript:, blob:, and other dangerous protocols.
+ *
+ * @param url - URL string to validate
+ * @returns true if the URL uses an allowed protocol
+ */
+export const isSafeUrl = (url) => {
+    if (!url)
+        return false;
+    try {
+        const parsed = new URL(url);
+        return ['http:', 'https:', 'mailto:'].includes(parsed.protocol);
+    }
+    catch {
+        return false;
+    }
+};

package/dist/utils/isSafeUrl.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/prefersReducedMotion.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Check if the user prefers reduced motion.
+ * Returns true when animations should be skipped.
+ */
+export declare function prefersReducedMotion(): boolean;

package/dist/utils/prefersReducedMotion.js

@@ -0,0 +1,8 @@
+/**
+ * Check if the user prefers reduced motion.
+ * Returns true when animations should be skipped.
+ */
+export function prefersReducedMotion() {
+    return typeof window !== 'undefined' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidotter",
-  "version": "0.36.1",
+  "version": "0.37.0",
   "type": "module",
   "description": "A DOS Themed Design System",
   "main": "./dist/index.umd.js",
@@ -21,6 +21,10 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
     },
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js"
+    },
     "./styles": "./dist/eidotter.css",
     "./utilities": "./src/styles/dos-utilities.css",
     "./tailwind.preset": "./tailwind.preset.cjs",
@@ -52,6 +56,8 @@
     "dist/index.umd.js",
     "dist/eidotter.css",
     "dist/components",
+    "dist/utils",
+    "dist/hooks",
     "dist/icons",
     "tailwind.preset.cjs",
     "src/styles/fonts.css",
@@ -68,7 +74,8 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build && node scripts/flatten-css-layers.mjs && tsc -p tsconfig.build.json && npm run build-icons",
+    "build": "vite build && node scripts/flatten-css-layers.mjs && tsc -p tsconfig.build.json && npm run build-components && npm run build-icons",
+    "build-components": "tsc -p tsconfig.components.json && node scripts/finalize-component-emit.mjs",
     "build-icons": "node scripts/icons/build-barrels.mjs && tsc -p tsconfig.icons.json",
     "fetch-icons": "node scripts/icons/fetch-svgs.mjs",
     "generate-icons": "node scripts/icons/build-tsx.mjs && node scripts/icons/build-barrels.mjs",