@xhub-short/ui 0.1.0-beta.9 → 1.0.0-beta.18

package/dist/chunk-SZXFH334.js

@@ -1,204 +0,0 @@
-import { injectComponentCSS } from './chunk-RMLTPW5S.js';
-import { useInsertionEffect, Component } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-// src/components/ErrorBoundary/ErrorBoundary.css.ts
-var ERROR_BOUNDARY_CSS = `
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * ErrorBoundary Styles
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-error-boundary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background: var(--sv-bg-primary, #000);
-  color: var(--sv-text-primary, #fff);
-  font-family: var(--sv-font-family, 'Urbanist', sans-serif);
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Error State
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-error-boundary--error .sv-error-boundary__content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sv-spacing-md, 16px);
-  padding: var(--sv-spacing-lg, 24px);
-  text-align: center;
-}
-
-.sv-error-boundary__icon {
-  font-size: 48px;
-}
-
-.sv-error-boundary__message {
-  font-size: var(--sv-font-size-md, 14px);
-  color: var(--sv-text-secondary, #999);
-}
-
-.sv-error-boundary__retry {
-  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-lg, 24px);
-  border: none;
-  border-radius: var(--sv-border-radius-md, 8px);
-  background: var(--sv-color-primary, #fe2c55);
-  color: #fff;
-  font-size: var(--sv-font-size-sm, 13px);
-  font-weight: var(--sv-font-weight-medium, 500);
-  cursor: pointer;
-  transition: opacity 0.2s ease;
-}
-
-.sv-error-boundary__retry:hover {
-  opacity: 0.9;
-}
-
-.sv-error-boundary__retry:active {
-  opacity: 0.8;
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Toast State (auto-skip with notification)
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-error-boundary--toast {
-  position: relative;
-}
-
-.sv-error-boundary__toast {
-  position: absolute;
-  bottom: var(--sv-spacing-xl, 32px);
-  left: 50%;
-  transform: translateX(-50%);
-  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-md, 16px);
-  border-radius: var(--sv-border-radius-md, 8px);
-  background: rgba(0, 0, 0, 0.8);
-  color: #fff;
-  font-size: var(--sv-font-size-sm, 13px);
-  white-space: nowrap;
-  animation: sv-toast-fade-in 0.3s ease;
-}
-
-@keyframes sv-toast-fade-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Loading State (silent auto-skip)
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-error-boundary--loading {
-  background: var(--sv-bg-primary, #000);
-}
-
-.sv-error-boundary__spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid rgba(255, 255, 255, 0.2);
-  border-top-color: var(--sv-color-primary, #fe2c55);
-  border-radius: 50%;
-  animation: sv-spinner 0.8s linear infinite;
-}
-
-@keyframes sv-spinner {
-  to {
-    transform: rotate(360deg);
-  }
-}
-`;
-var ErrorBoundaryInternal = class extends Component {
-  constructor(props) {
-    super(props);
-    this.skipTimeoutId = null;
-    this.reset = () => {
-      const { onReset } = this.props;
-      this.clearSkipTimeout();
-      this.setState({ hasError: false, error: null, errorInfo: null });
-      onReset?.();
-    };
-    this.state = { hasError: false, error: null, errorInfo: null };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error };
-  }
-  componentDidCatch(error, errorInfo) {
-    const { onError, mode = "show-error", skipDelay = 1e3 } = this.props;
-    this.setState({ errorInfo });
-    onError?.(error, errorInfo);
-    if (!this.skipTimeoutId && (mode === "auto-skip" || mode === "auto-skip-with-toast")) {
-      this.skipTimeoutId = setTimeout(() => {
-        this.handleSkip();
-      }, skipDelay);
-    }
-  }
-  componentWillUnmount() {
-    this.clearSkipTimeout();
-  }
-  /**
-   * Handle skip action with error safeguard
-   * Wraps onSkip in try/finally to ensure reset() is always called
-   */
-  handleSkip() {
-    const { onSkip } = this.props;
-    try {
-      onSkip?.();
-    } finally {
-      this.reset();
-    }
-  }
-  clearSkipTimeout() {
-    if (this.skipTimeoutId) {
-      clearTimeout(this.skipTimeoutId);
-      this.skipTimeoutId = null;
-    }
-  }
-  render() {
-    const {
-      children,
-      fallback,
-      mode = "show-error",
-      toastMessage = "Video unavailable, skipping..."
-    } = this.props;
-    const { hasError, error, errorInfo } = this.state;
-    if (!hasError) {
-      return children;
-    }
-    if (fallback) {
-      if (typeof fallback === "function") {
-        return fallback(error ?? new Error("Unknown error"), errorInfo, this.reset);
-      }
-      return fallback;
-    }
-    if (mode === "auto-skip-with-toast") {
-      return /* @__PURE__ */ jsx("div", { className: "sv-error-boundary sv-error-boundary--toast", children: /* @__PURE__ */ jsx("div", { className: "sv-error-boundary__toast", children: toastMessage }) });
-    }
-    if (mode === "auto-skip") {
-      return /* @__PURE__ */ jsx("div", { className: "sv-error-boundary sv-error-boundary--loading" });
-    }
-    return /* @__PURE__ */ jsx("div", { className: "sv-error-boundary sv-error-boundary--error", children: /* @__PURE__ */ jsxs("div", { className: "sv-error-boundary__content", children: [
-      /* @__PURE__ */ jsx("div", { className: "sv-error-boundary__icon", children: "\u26A0\uFE0F" }),
-      /* @__PURE__ */ jsx("div", { className: "sv-error-boundary__message", children: "Something went wrong" }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "sv-error-boundary__retry", onClick: this.reset, children: "Try Again" })
-    ] }) });
-  }
-};
-function ErrorBoundary(props) {
-  const { cssKey = "sv-error-boundary" } = props;
-  useInsertionEffect(() => {
-    return injectComponentCSS(cssKey, ERROR_BOUNDARY_CSS);
-  }, [cssKey]);
-  return /* @__PURE__ */ jsx(ErrorBoundaryInternal, { ...props });
-}
-
-export { ErrorBoundary };

package/dist/chunk-UNV3NWN6.js

@@ -1,148 +0,0 @@
-import { clsx2 } from './chunk-EDWS2IPH.js';
-import { injectComponentCSS } from './chunk-RMLTPW5S.js';
-import { useInsertionEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-// src/components/Skeleton/Skeleton.css.ts
-var SKELETON_CSS = `
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * Skeleton Styles
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-skeleton {
-  display: block;
-  background: var(--sv-skeleton-bg, rgba(255, 255, 255, 0.1));
-  border-radius: var(--sv-border-radius-sm, 4px);
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Pulse Animation
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-skeleton--pulse {
-  animation: sv-skeleton-pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes sv-skeleton-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Wave Animation
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-skeleton--wave {
-  position: relative;
-  overflow: hidden;
-}
-
-.sv-skeleton--wave::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.1),
-    transparent
-  );
-  animation: sv-skeleton-wave 1.5s ease-in-out infinite;
-}
-
-@keyframes sv-skeleton-wave {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Preset: Video
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.sv-skeleton-video {
-  width: 100%;
-  height: 100%;
-  background: var(--sv-bg-primary, #000);
-}
-
-/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Dark Mode Support
- * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-:root[data-theme="light"] .sv-skeleton,
-.light .sv-skeleton {
-  background: var(--sv-skeleton-bg-light, rgba(0, 0, 0, 0.1));
-}
-
-:root[data-theme="light"] .sv-skeleton--wave::after,
-.light .sv-skeleton--wave::after {
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(0, 0, 0, 0.05),
-    transparent
-  );
-}
-`;
-function Skeleton({
-  width,
-  height,
-  borderRadius,
-  animation = "pulse",
-  circle = false,
-  className
-}) {
-  useInsertionEffect(() => {
-    return injectComponentCSS("skeleton", SKELETON_CSS);
-  }, []);
-  const style = {};
-  if (width !== void 0) {
-    style.width = typeof width === "number" ? `${width}px` : width;
-  }
-  if (height !== void 0) {
-    style.height = typeof height === "number" ? `${height}px` : height;
-  }
-  if (borderRadius !== void 0) {
-    style.borderRadius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
-  } else if (circle) {
-    style.borderRadius = "50%";
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx2("sv-skeleton", animation !== "none" && `sv-skeleton--${animation}`, className),
-      style,
-      "aria-hidden": "true"
-    }
-  );
-}
-function SkeletonVideo({
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-skeleton-video", className), children: /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "100%", animation: "wave" }) });
-}
-function SkeletonAvatar({
-  size = 40,
-  className
-}) {
-  return /* @__PURE__ */ jsx(Skeleton, { width: size, height: size, circle: true, className });
-}
-function SkeletonText({
-  width = "100%",
-  className
-}) {
-  return /* @__PURE__ */ jsx(Skeleton, { width, height: 14, borderRadius: 4, className });
-}
-
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo };