@teo-garcia/react-shared 1.2.1 → 1.3.0

package/dist/components/dev-panel/index.d.ts

@@ -1,2 +1,2 @@
-export { DevPanel, type DevPanelProps } from './dev-panel.js';
+export { ALL_DEV_PANEL_FEATURES, DevPanel, type DevPanelFeature, type DevPanelItem, type DevPanelLayout, type DevPanelProps, } from './dev-panel.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/dev-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dev-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dev-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,QAAQ,EACR,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,aAAa,GACnB,MAAM,gBAAgB,CAAA"}

package/dist/components/dev-panel/index.js

@@ -1 +1 @@
-export { DevPanel } from './dev-panel.js';
+export { ALL_DEV_PANEL_FEATURES, DevPanel, } from './dev-panel.js';

package/dist/components/dev-panel/use-dev-panel-diagnostics.d.ts

@@ -0,0 +1,39 @@
+import type { DevPanelFeature } from './dev-panel-features.js';
+export type ResolvedTheme = 'dark' | 'light';
+export interface DevPanelDiagnostics {
+    canHover: boolean;
+    connectionSummary: string;
+    contrast: 'custom' | 'less' | 'more' | 'no-preference';
+    displayStandalone: boolean;
+    dpr: number;
+    focusPeek: string;
+    fps: number;
+    fpsSampled: boolean;
+    fullscreen: boolean;
+    heapUsedMb: number | null;
+    invertedColors: boolean;
+    locale: string;
+    online: boolean;
+    orientation: string;
+    pointerCoarse: boolean;
+    prefersColorScheme: ResolvedTheme;
+    reducedMotion: boolean;
+    reducedTransparency: boolean;
+    resolvedTheme: ResolvedTheme;
+    saveDataReduced: boolean;
+    safeBottom: number;
+    safeLeft: number;
+    safeRight: number;
+    safeTop: number;
+    scrollHeight: number;
+    scrollY: number;
+    scrollbarWidth: number;
+    timeZone: string;
+    visibility: DocumentVisibilityState;
+    vvHeight: number;
+    vvScale: number;
+    vvWidth: number;
+}
+export declare function devPanelFeaturesKey(features: DevPanelFeature[] | undefined): string;
+export declare function useDevPanelDiagnostics(features: DevPanelFeature[] | undefined): DevPanelDiagnostics;
+//# sourceMappingURL=use-dev-panel-diagnostics.d.ts.map

package/dist/components/dev-panel/use-dev-panel-diagnostics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dev-panel-diagnostics.d.ts","sourceRoot":"","sources":["../../../src/components/dev-panel/use-dev-panel-diagnostics.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAE9D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAA;AAE5C,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,OAAO,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,eAAe,CAAA;IACtD,iBAAiB,EAAE,OAAO,CAAA;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,cAAc,EAAE,OAAO,CAAA;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,kBAAkB,EAAE,aAAa,CAAA;IACjC,aAAa,EAAE,OAAO,CAAA;IACtB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,aAAa,EAAE,aAAa,CAAA;IAC5B,eAAe,EAAE,OAAO,CAAA;IACxB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,uBAAuB,CAAA;IACnC,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;CAChB;AAqID,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,eAAe,EAAE,GAAG,SAAS,GACtC,MAAM,CAGR;AAED,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,eAAe,EAAE,GAAG,SAAS,GACtC,mBAAmB,CA0UrB"}

package/dist/components/dev-panel/use-dev-panel-diagnostics.js

@@ -0,0 +1,384 @@
+import { useEffect, useMemo, useState } from 'react';
+const INITIAL = {
+    canHover: false,
+    connectionSummary: '',
+    contrast: 'no-preference',
+    displayStandalone: false,
+    dpr: 1,
+    focusPeek: '',
+    fps: 0,
+    fpsSampled: false,
+    fullscreen: false,
+    heapUsedMb: null,
+    invertedColors: false,
+    locale: '',
+    online: true,
+    orientation: 'unknown',
+    pointerCoarse: false,
+    prefersColorScheme: 'light',
+    reducedMotion: false,
+    reducedTransparency: false,
+    resolvedTheme: 'light',
+    saveDataReduced: false,
+    safeBottom: 0,
+    safeLeft: 0,
+    safeRight: 0,
+    safeTop: 0,
+    scrollHeight: 0,
+    scrollY: 0,
+    scrollbarWidth: 0,
+    timeZone: '',
+    visibility: 'visible',
+    vvHeight: 0,
+    vvScale: 1,
+    vvWidth: 0,
+};
+function resolveTheme(root) {
+    const explicitClassTheme = ['dark', 'light'].find((name) => root.classList.contains(name));
+    if (explicitClassTheme === 'dark' || explicitClassTheme === 'light') {
+        return explicitClassTheme;
+    }
+    const explicitAttributeTheme = root.getAttribute('data-theme') ??
+        root.getAttribute('data-color-scheme') ??
+        root.dataset.theme;
+    if (explicitAttributeTheme === 'dark' || explicitAttributeTheme === 'light') {
+        return explicitAttributeTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+}
+function readSafeAreaInsets() {
+    const probe = document.createElement('div');
+    probe.style.cssText =
+        'position:fixed;left:0;top:0;visibility:hidden;pointer-events:none;z-index:-1;' +
+            'padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px);' +
+            'padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px)';
+    document.documentElement.appendChild(probe);
+    const cs = getComputedStyle(probe);
+    const px = (v) => Math.round(parseFloat(v) || 0);
+    const top = px(cs.paddingTop);
+    const right = px(cs.paddingRight);
+    const bottom = px(cs.paddingBottom);
+    const left = px(cs.paddingLeft);
+    document.documentElement.removeChild(probe);
+    return { bottom, left, right, top };
+}
+function resolveContrast(m) {
+    try {
+        if (m('(prefers-contrast: more)').matches)
+            return 'more';
+        if (m('(prefers-contrast: less)').matches)
+            return 'less';
+        if (m('(prefers-contrast: custom)').matches)
+            return 'custom';
+    }
+    catch {
+        /* unsupported query */
+    }
+    return 'no-preference';
+}
+function orientationLabel() {
+    const o = screen.orientation;
+    if (o && typeof o.type === 'string')
+        return o.type;
+    return window.innerHeight >= window.innerWidth ? 'portrait' : 'landscape';
+}
+function focusPeekLabel() {
+    const el = document.activeElement;
+    if (!el || el === document.body)
+        return 'body';
+    if (el === document.documentElement)
+        return 'html';
+    const tag = el.tagName.toLowerCase();
+    let s = tag;
+    if (el.id)
+        s += `#${el.id}`;
+    if (el.className && typeof el.className === 'string') {
+        const cls = el.className.trim().split(/\s+/).filter(Boolean).slice(0, 2);
+        if (cls.length)
+            s += `.${cls.join('.')}`;
+    }
+    return s.length > 72 ? `${s.slice(0, 69)}…` : s;
+}
+function readConnectionSummary() {
+    const nav = navigator;
+    const c = nav.connection;
+    if (!c || typeof c.effectiveType !== 'string')
+        return 'unavailable';
+    const parts = [c.effectiveType];
+    if (typeof c.downlink === 'number')
+        parts.push(`${c.downlink} Mbps`);
+    if (typeof c.rtt === 'number')
+        parts.push(`rtt ${c.rtt}ms`);
+    return parts.join(' · ');
+}
+export function devPanelFeaturesKey(features) {
+    if (features == null || features.length === 0)
+        return '';
+    return [...features].sort().join('\0');
+}
+export function useDevPanelDiagnostics(features) {
+    const featureKey = devPanelFeaturesKey(features);
+    const enabled = useMemo(() => new Set(features ?? []), [featureKey]);
+    const [state, setState] = useState(INITIAL);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const patch = (partial) => setState((s) => ({ ...s, ...partial }));
+        function syncResolvedTheme() {
+            patch({ resolvedTheme: resolveTheme(document.documentElement) });
+        }
+        syncResolvedTheme();
+        const cleanups = [];
+        const themeObserver = new MutationObserver(syncResolvedTheme);
+        themeObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme', 'data-color-scheme'],
+        });
+        cleanups.push(() => themeObserver.disconnect());
+        if (enabled.has('colorScheme')) {
+            const mColor = window.matchMedia('(prefers-color-scheme: dark)');
+            const onColor = () => patch({
+                prefersColorScheme: mColor.matches ? 'dark' : 'light',
+            });
+            onColor();
+            mColor.addEventListener('change', onColor);
+            cleanups.push(() => mColor.removeEventListener('change', onColor));
+        }
+        if (enabled.has('media')) {
+            const mReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
+            const mPointer = window.matchMedia('(pointer: coarse)');
+            const mHover = window.matchMedia('(hover: hover)');
+            const onReduced = () => patch({ reducedMotion: mReduced.matches });
+            const onPointer = () => patch({ pointerCoarse: mPointer.matches });
+            const onHover = () => patch({ canHover: mHover.matches });
+            onReduced();
+            onPointer();
+            onHover();
+            mReduced.addEventListener('change', onReduced);
+            mPointer.addEventListener('change', onPointer);
+            mHover.addEventListener('change', onHover);
+            cleanups.push(() => mReduced.removeEventListener('change', onReduced), () => mPointer.removeEventListener('change', onPointer), () => mHover.removeEventListener('change', onHover));
+        }
+        if (enabled.has('dpr')) {
+            const update = () => patch({ dpr: Number(window.devicePixelRatio.toFixed(2)) });
+            update();
+            window.addEventListener('resize', update);
+            cleanups.push(() => window.removeEventListener('resize', update));
+        }
+        if (enabled.has('scroll')) {
+            const update = () => patch({
+                scrollHeight: document.documentElement.scrollHeight,
+                scrollY: Math.round(window.scrollY),
+            });
+            update();
+            window.addEventListener('scroll', update, { passive: true });
+            window.addEventListener('resize', update);
+            cleanups.push(() => window.removeEventListener('scroll', update), () => window.removeEventListener('resize', update));
+        }
+        if (enabled.has('safeArea')) {
+            const update = () => {
+                const { bottom, left, right, top } = readSafeAreaInsets();
+                patch({
+                    safeBottom: bottom,
+                    safeLeft: left,
+                    safeRight: right,
+                    safeTop: top,
+                });
+            };
+            update();
+            window.addEventListener('resize', update);
+            window.visualViewport?.addEventListener('resize', update);
+            cleanups.push(() => {
+                window.removeEventListener('resize', update);
+                window.visualViewport?.removeEventListener('resize', update);
+            });
+        }
+        if (enabled.has('visualViewport') && window.visualViewport) {
+            const vv = window.visualViewport;
+            const update = () => patch({
+                vvHeight: Math.round(vv.height),
+                vvScale: Number(vv.scale.toFixed(3)),
+                vvWidth: Math.round(vv.width),
+            });
+            update();
+            vv.addEventListener('resize', update);
+            vv.addEventListener('scroll', update);
+            cleanups.push(() => vv.removeEventListener('resize', update), () => vv.removeEventListener('scroll', update));
+        }
+        if (enabled.has('scrollbar')) {
+            const update = () => patch({
+                scrollbarWidth: Math.max(0, window.innerWidth - document.documentElement.clientWidth),
+            });
+            update();
+            window.addEventListener('resize', update);
+            cleanups.push(() => window.removeEventListener('resize', update));
+        }
+        if (enabled.has('orientation')) {
+            const update = () => patch({ orientation: orientationLabel() });
+            update();
+            window.addEventListener('resize', update);
+            screen.orientation?.addEventListener('change', update);
+            cleanups.push(() => {
+                window.removeEventListener('resize', update);
+                screen.orientation?.removeEventListener('change', update);
+            });
+        }
+        if (enabled.has('contrast')) {
+            const m = window.matchMedia.bind(window);
+            const run = () => patch({ contrast: resolveContrast(m) });
+            const matchers = [
+                m('(prefers-contrast: more)'),
+                m('(prefers-contrast: less)'),
+                m('(prefers-contrast: custom)'),
+            ];
+            run();
+            matchers.forEach((matcher) => matcher.addEventListener('change', run));
+            cleanups.push(() => matchers.forEach((matcher) => matcher.removeEventListener('change', run)));
+        }
+        if (enabled.has('reducedTransparency')) {
+            try {
+                const mq = window.matchMedia('(prefers-reduced-transparency: reduce)');
+                const run = () => patch({ reducedTransparency: mq.matches });
+                run();
+                mq.addEventListener('change', run);
+                cleanups.push(() => mq.removeEventListener('change', run));
+            }
+            catch {
+                /* unsupported */
+            }
+        }
+        if (enabled.has('inverted')) {
+            try {
+                const mq = window.matchMedia('(inverted-colors: inverted)');
+                const run = () => patch({ invertedColors: mq.matches });
+                run();
+                mq.addEventListener('change', run);
+                cleanups.push(() => mq.removeEventListener('change', run));
+            }
+            catch {
+                /* unsupported */
+            }
+        }
+        if (enabled.has('online')) {
+            const update = () => patch({ online: navigator.onLine });
+            update();
+            window.addEventListener('online', update);
+            window.addEventListener('offline', update);
+            cleanups.push(() => window.removeEventListener('online', update), () => window.removeEventListener('offline', update));
+        }
+        if (enabled.has('visibility')) {
+            const update = () => patch({ visibility: document.visibilityState });
+            update();
+            document.addEventListener('visibilitychange', update);
+            cleanups.push(() => document.removeEventListener('visibilitychange', update));
+        }
+        if (enabled.has('fullscreen')) {
+            const update = () => patch({ fullscreen: document.fullscreenElement != null });
+            update();
+            document.addEventListener('fullscreenchange', update);
+            cleanups.push(() => document.removeEventListener('fullscreenchange', update));
+        }
+        if (enabled.has('displayMode')) {
+            const mq = window.matchMedia('(display-mode: standalone)');
+            const update = () => patch({
+                displayStandalone: mq.matches ||
+                    navigator.standalone ===
+                        true,
+            });
+            update();
+            mq.addEventListener('change', update);
+            cleanups.push(() => mq.removeEventListener('change', update));
+        }
+        if (enabled.has('locale')) {
+            let timeZone = '';
+            try {
+                timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone ?? '';
+            }
+            catch {
+                timeZone = '';
+            }
+            patch({
+                locale: navigator.language ?? '',
+                timeZone,
+            });
+        }
+        if (enabled.has('connection')) {
+            const update = () => patch({ connectionSummary: readConnectionSummary() });
+            update();
+            const nav = navigator;
+            const c = nav.connection;
+            if (c?.addEventListener) {
+                c.addEventListener('change', update);
+                cleanups.push(() => c.removeEventListener?.('change', update));
+            }
+        }
+        if (enabled.has('saveData')) {
+            try {
+                const mq = window.matchMedia('(prefers-reduced-data: reduce)');
+                const run = () => patch({ saveDataReduced: mq.matches });
+                run();
+                mq.addEventListener('change', run);
+                cleanups.push(() => mq.removeEventListener('change', run));
+            }
+            catch {
+                /* unsupported */
+            }
+        }
+        if (enabled.has('focus')) {
+            const update = () => patch({ focusPeek: focusPeekLabel() });
+            update();
+            document.addEventListener('focusin', update, true);
+            cleanups.push(() => document.removeEventListener('focusin', update, true));
+        }
+        return () => {
+            cleanups.forEach((fn) => fn());
+        };
+    }, [enabled, featureKey]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        if (!enabled.has('perf'))
+            return;
+        let rafId = 0;
+        let frames = 0;
+        let last = performance.now();
+        const loop = (now) => {
+            frames += 1;
+            const elapsed = now - last;
+            if (elapsed >= 1000) {
+                setState((s) => ({
+                    ...s,
+                    fps: Math.round((frames * 1000) / elapsed),
+                    fpsSampled: true,
+                }));
+                frames = 0;
+                last = now;
+            }
+            rafId = requestAnimationFrame(loop);
+        };
+        rafId = requestAnimationFrame(loop);
+        return () => cancelAnimationFrame(rafId);
+    }, [enabled]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        if (!enabled.has('memory'))
+            return;
+        const perf = performance;
+        const tick = () => {
+            const m = perf.memory;
+            setState((s) => ({
+                ...s,
+                heapUsedMb: m
+                    ? Math.round((m.usedJSHeapSize / 1024 / 1024) * 10) / 10
+                    : null,
+            }));
+        };
+        tick();
+        const id = window.setInterval(tick, 2000);
+        return () => window.clearInterval(id);
+    }, [enabled]);
+    return state;
+}

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './aspect-ratio/index.js';
+export * from './client-only/index.js';
 export * from './debug-json/index.js';
 export * from './dev-panel/index.js';
 export * from './error-boundary/index.js';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA"}

package/dist/components/index.js

@@ -1,4 +1,5 @@
 export * from './aspect-ratio/index.js';
+export * from './client-only/index.js';
 export * from './debug-json/index.js';
 export * from './dev-panel/index.js';
 export * from './error-boundary/index.js';

package/dist/components/separator/separator.d.ts

@@ -1,11 +1,11 @@
-interface SeparatorProps {
+import { type HTMLAttributes } from 'react';
+interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
     orientation?: 'horizontal' | 'vertical';
-    className?: string;
 }
 /**
- * Semantic separator with Tailwind styling.
+ * Semantic separator with self-contained styling.
  * RSC-safe. Use `orientation="vertical"` in flex rows.
  */
-export declare function Separator({ orientation, className, }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function Separator({ orientation, style, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=separator.d.ts.map

package/dist/components/separator/separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.tsx"],"names":[],"mappings":"AAEA,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAA0B,EAC1B,SAAS,GACV,EAAE,cAAc,2CAchB"}
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,UAAU,cAAe,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC5D,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;CACxC;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAA0B,EAC1B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,2CA0BhB"}

package/dist/components/separator/separator.js

@@ -1,11 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../utils/cn.js';
 /**
- * Semantic separator with Tailwind styling.
+ * Semantic separator with self-contained styling.
  * RSC-safe. Use `orientation="vertical"` in flex rows.
  */
-export function Separator({ orientation = 'horizontal', className, }) {
-    return (_jsx("hr", { role: 'separator', "aria-orientation": orientation, className: cn(orientation === 'horizontal'
-            ? 'my-2 w-full border-t'
-            : 'mx-2 h-full border-l', 'border-black/10 dark:border-white/10', className) }));
+export function Separator({ orientation = 'horizontal', style, ...props }) {
+    return (_jsx("hr", { role: 'separator', "aria-orientation": orientation, style: {
+            border: 0,
+            flexShrink: 0,
+            ...(orientation === 'horizontal'
+                ? {
+                    borderTop: '1px solid var(--react-shared-separator-color, rgba(15, 23, 42, 0.12))',
+                    margin: '0.5rem 0',
+                    width: '100%',
+                }
+                : {
+                    alignSelf: 'stretch',
+                    borderLeft: '1px solid var(--react-shared-separator-color, rgba(15, 23, 42, 0.12))',
+                    margin: '0 0.5rem',
+                }),
+            ...style,
+        }, ...props }));
 }

package/dist/components/skeleton/skeleton.d.ts

@@ -1,3 +1,3 @@
 import { type HTMLAttributes } from 'react';
-export declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton({ style, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,2CAUhC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAc3C,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,2CAgB3E"}

package/dist/components/skeleton/skeleton.js

@@ -1,5 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../utils/cn.js';
-export function Skeleton({ className, ...props }) {
-    return (_jsx("div", { className: cn('animate-pulse rounded bg-black/10 dark:bg-white/10', className), ...props }));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const PULSE_KEYFRAMES = `
+@keyframes react-shared-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.58;
+  }
+}
+`;
+export function Skeleton({ style, ...props }) {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: PULSE_KEYFRAMES }), _jsx("div", { style: {
+                    animation: 'react-shared-skeleton-pulse 1.6s ease-in-out infinite',
+                    background: 'var(--react-shared-skeleton-background, rgba(15, 23, 42, 0.08))',
+                    borderRadius: '0.5rem',
+                    ...style,
+                }, ...props })] }));
 }

package/dist/components/skip-link/skip-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skip-link.d.ts","sourceRoot":"","sources":["../../../src/components/skip-link/skip-link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE3D,UAAU,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACrE,8EAA8E;IAC9E,IAAI,EAAE,MAAM,CAAA;CACb;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAiC,EACjC,GAAG,KAAK,EACT,EAAE,aAAa,2CA4Bf"}
+{"version":3,"file":"skip-link.d.ts","sourceRoot":"","sources":["../../../src/components/skip-link/skip-link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE3D,UAAU,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACrE,8EAA8E;IAC9E,IAAI,EAAE,MAAM,CAAA;CACb;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAiC,EACjC,GAAG,KAAK,EACT,EAAE,aAAa,2CAgCf"}

package/dist/components/skip-link/skip-link.js

@@ -9,18 +9,21 @@ import { useState } from 'react';
 export function SkipLink({ href, children = 'Skip to main content', ...props }) {
     const [focused, setFocused] = useState(false);
     return (_jsx("a", { href: href, onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: {
-            position: 'absolute',
+            position: 'fixed',
             top: focused ? '0.5rem' : '-100%',
             left: '0.5rem',
             zIndex: 9999,
             padding: '0.5rem 1rem',
-            background: '#000',
-            color: '#fff',
+            background: 'var(--react-shared-skip-link-background, rgba(15, 23, 42, 0.96))',
+            color: 'var(--react-shared-skip-link-foreground, #fff)',
             textDecoration: 'none',
-            borderRadius: '4px',
+            borderRadius: '9999px',
             fontSize: '0.875rem',
-            fontWeight: 500,
+            fontWeight: 600,
             transition: 'top 0.1s',
+            boxShadow: focused
+                ? '0 0 0 3px rgba(59, 130, 246, 0.35)'
+                : '0 1px 2px rgba(15, 23, 42, 0.16)',
             outline: '2px solid transparent',
         }, ...props, children: children }));
 }

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export { DEFAULT_BREAKPOINTS, resolveBreakpoint, useBreakpoint, } from './use-breakpoint.js';
 export { useCopyToClipboard } from './use-copy-to-clipboard.js';
 export { useDebounce } from './use-debounce.js';
 export { useEventListener } from './use-event-listener.js';

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA"}

package/dist/hooks/index.js

@@ -1,3 +1,4 @@
+export { DEFAULT_BREAKPOINTS, resolveBreakpoint, useBreakpoint, } from './use-breakpoint.js';
 export { useCopyToClipboard } from './use-copy-to-clipboard.js';
 export { useDebounce } from './use-debounce.js';
 export { useEventListener } from './use-event-listener.js';

package/dist/hooks/use-breakpoint.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT_BREAKPOINTS: Record<string, number>;
+export interface BreakpointState {
+    breakpoint: string;
+    height: number;
+    width: number;
+}
+export declare function resolveBreakpoint(width: number, breakpoints: Record<string, number>): string;
+export declare function useBreakpoint(breakpoints?: Record<string, number>): BreakpointState;
+//# sourceMappingURL=use-breakpoint.d.ts.map

package/dist/hooks/use-breakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/use-breakpoint.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMtD,CAAA;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAClC,MAAM,CAQR;AAED,wBAAgB,aAAa,CAC3B,WAAW,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAuB,GACxD,eAAe,CAmCjB"}