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

package/dist/chunk-3OB3OVYR.js

@@ -0,0 +1,349 @@
+import { PlusIcon } from './chunk-ANCP53F3.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { clsx } from 'clsx';
+import { createContext, useInsertionEffect, useMemo, useState, useEffect, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var AuthorInfoContext = createContext(null);
+AuthorInfoContext.displayName = "AuthorInfoContext";
+function useAuthorInfoContext() {
+  const context = useContext(AuthorInfoContext);
+  if (!context) {
+    throw new Error(
+      "[AuthorInfo] useAuthorInfoContext must be used within <AuthorInfoHeadless>. Make sure you wrap your component with <AuthorInfoHeadless>."
+    );
+  }
+  return context;
+}
+function useOptionalAuthorInfoContext() {
+  return useContext(AuthorInfoContext);
+}
+function DefaultCheckIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) });
+}
+function DefaultUserIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) });
+}
+var SIZE_CLASS_MAP = {
+  small: "sv-author-info__avatar--small",
+  large: "sv-author-info__avatar--large",
+  default: ""
+};
+function AuthorAvatar({
+  src,
+  alt,
+  size = "default",
+  showVerified = false,
+  verifiedIcon,
+  onClick,
+  className,
+  children
+}) {
+  const [imgError, setImgError] = useState(false);
+  const context = useOptionalAuthorInfoContext();
+  const avatarSrc = src ?? context?.author.avatar;
+  const avatarAlt = alt ?? context?.author.name ?? "Author avatar";
+  const isVerified = context?.author.isVerified ?? false;
+  const handleClick = onClick ?? context?.openProfile;
+  useEffect(() => {
+    setImgError(false);
+  }, [avatarSrc]);
+  const handleImgError = () => setImgError(true);
+  const sizeClass = SIZE_CLASS_MAP[size];
+  const showImage = avatarSrc && !imgError;
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && handleClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx("sv-author-info__avatar", sizeClass, className),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick?.();
+      },
+      onKeyDown: handleKeyDown,
+      role: handleClick ? "button" : void 0,
+      tabIndex: handleClick ? 0 : void 0,
+      "aria-label": handleClick ? `View ${avatarAlt}'s profile` : void 0,
+      children: [
+        children ?? (showImage && avatarSrc ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: avatarSrc,
+            alt: avatarAlt,
+            className: "sv-author-info__avatar-img",
+            loading: "lazy",
+            onError: handleImgError
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "sv-author-info__avatar-placeholder", children: /* @__PURE__ */ jsx(DefaultUserIcon, {}) })),
+        showVerified && isVerified && /* @__PURE__ */ jsx("div", { className: "sv-author-info__verified-badge", "aria-label": "Verified", children: verifiedIcon ?? /* @__PURE__ */ jsx(DefaultCheckIcon, {}) })
+      ]
+    }
+  );
+}
+function AuthorDescription({
+  description,
+  singleLine = false,
+  className,
+  children
+}) {
+  const context = useOptionalAuthorInfoContext();
+  const displayDescription = description ?? context?.author.description;
+  if (!children && !displayDescription) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: clsx(
+        "sv-author-info__description",
+        singleLine && "sv-author-info__description--single-line",
+        className
+      ),
+      children: children ?? displayDescription
+    }
+  );
+}
+
+// src/components/AuthorInfo/AuthorInfo.css.ts
+var AUTHOR_INFO_CSS = `.sv-author-info{display:flex;align-items:center;gap:var(--sv-author-gap,12px);width:100%}.sv-author-info--vertical{flex-direction:column;align-items:flex-start}.sv-author-info--horizontal{flex-direction:row;align-items:center}.sv-author-info--compact{gap:var(--sv-author-gap-compact,8px)}.sv-author-info__avatar{position:relative;flex-shrink:0;width:var(--sv-author-avatar-size,48px);height:var(--sv-author-avatar-size,48px);border-radius:50%;overflow:hidden;background:var(--sv-author-avatar-bg,rgba(255,255,255,.1));cursor:pointer;transition:transform .15s ease}.sv-author-info__avatar:hover{transform:scale(1.05)}.sv-author-info__avatar:active{transform:scale(.98)}.sv-author-info__avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.sv-author-info__avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--sv-author-avatar-placeholder-bg,linear-gradient(135deg,#667eea 0%,#764ba2 100%));color:var(--sv-author-avatar-placeholder-color,#fff);font-size:calc(var(--sv-author-avatar-size,48px)* .4);font-weight:600;text-transform:uppercase}.sv-author-info__avatar-placeholder svg{width:60%;height:60%;opacity:.9}.sv-author-info__avatar--small{width:var(--sv-author-avatar-size-small,32px);height:var(--sv-author-avatar-size-small,32px)}.sv-author-info__avatar--large{width:var(--sv-author-avatar-size-large,64px);height:var(--sv-author-avatar-size-large,64px)}.sv-author-info__verified-badge{position:absolute;bottom:-2px;right:-2px;width:calc(var(--sv-author-avatar-size,48px)* .35);height:calc(var(--sv-author-avatar-size,48px)* .35);min-width:14px;min-height:14px;border-radius:50%;background:var(--sv-verified-badge-bg,#1DA1F2);display:flex;align-items:center;justify-content:center;border:2px solid var(--sv-verified-badge-border,#000)}.sv-author-info__verified-badge svg{width:60%;height:60%;color:var(--sv-verified-badge-color,#fff)}.sv-author-info__content{display:flex;flex-direction:column;gap:var(--sv-author-content-gap,2px);flex:1;min-width:0}.sv-author-info__name{display:flex;align-items:center;gap:var(--sv-author-name-gap,4px);font-size:var(--sv-author-name-size,16px);font-weight:var(--sv-author-name-weight,600);color:var(--sv-author-name-color,#fff);cursor:pointer;transition:opacity .15s ease}.sv-author-info__name:hover{opacity:.8}.sv-author-info__name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-author-info__name--with-at::before{content:'@';opacity:.8}.sv-author-info__name-verified{flex-shrink:0;width:var(--sv-author-name-verified-size,14px);height:var(--sv-author-name-verified-size,14px);color:var(--sv-verified-badge-bg,#1DA1F2)}.sv-author-info__description{font-size:var(--sv-author-desc-size,13px);color:var(--sv-author-desc-color,rgba(255,255,255,.7));line-height:var(--sv-author-desc-line-height,1.4);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:var(--sv-author-desc-lines,2);-webkit-box-orient:vertical}.sv-author-info__description--single-line{-webkit-line-clamp:1;white-space:nowrap;display:block}.sv-author-info__follow-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sv-follow-btn-gap,6px);padding:var(--sv-follow-btn-padding,8px 16px);min-width:var(--sv-follow-btn-min-width,88px);border:0;border-radius:var(--sv-follow-btn-radius,4px);font-size:var(--sv-follow-btn-size,14px);font-weight:var(--sv-follow-btn-weight,600);cursor:pointer;transition:all .2s ease;outline:none;user-select:none;-webkit-tap-highlight-color:transparent}.sv-author-info__follow-btn--default{background:var(--sv-follow-btn-bg,#fe2c55);color:var(--sv-follow-btn-color,#fff)}.sv-author-info__follow-btn--default:hover:not(:disabled){background:var(--sv-follow-btn-bg-hover,#f46);transform:scale(1.02)}.sv-author-info__follow-btn--default:active:not(:disabled){transform:scale(.98)}.sv-author-info__follow-btn--following{background:var(--sv-follow-btn-following-bg,transparent);color:var(--sv-follow-btn-following-color,rgba(255,255,255,.9));border:1px solid var(--sv-follow-btn-following-border,rgba(255,255,255,.3))}.sv-author-info__follow-btn--following:hover:not(:disabled){background:var(--sv-follow-btn-following-bg-hover,rgba(255,255,255,.1));border-color:var(--sv-follow-btn-following-border-hover,rgba(255,255,255,.5))}.sv-author-info__follow-btn--pending{opacity:.6;pointer-events:none;cursor:wait}.sv-author-info__follow-btn:disabled{opacity:.5;cursor:not-allowed}.sv-author-info__follow-btn-icon{width:var(--sv-follow-btn-icon-size,16px);height:var(--sv-follow-btn-icon-size,16px);flex-shrink:0}.sv-author-info__follow-btn-spinner{width:var(--sv-follow-btn-icon-size,16px);height:var(--sv-follow-btn-icon-size,16px);border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sv-author-info-spin .6s linear infinite}@keyframes sv-author-info-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.sv-author-info__follow-btn--small{padding:var(--sv-follow-btn-padding-small,6px 12px);font-size:var(--sv-follow-btn-size-small,12px);min-width:var(--sv-follow-btn-min-width-small,72px)}.sv-author-info__follow-btn--large{padding:var(--sv-follow-btn-padding-large,10px 20px);font-size:var(--sv-follow-btn-size-large,16px);min-width:var(--sv-follow-btn-min-width-large,100px)}.sv-author-info__follow-btn--icon-only{min-width:unset;padding:var(--sv-follow-btn-icon-padding,8px);border-radius:50%}.sv-author-info--inline{justify-content:space-between}.sv-author-info--inline .sv-author-info__content{flex:1}.sv-author-info--stacked{flex-direction:column;align-items:center;text-align:center}.sv-author-info--stacked .sv-author-info__content{align-items:center}.sv-author-info--overlay{text-shadow:var(--sv-author-overlay-shadow,0 1px 2px rgba(0,0,0,.5))}.sv-author-info--overlay .sv-author-info__avatar{border:2px solid var(--sv-author-overlay-avatar-border,rgba(255,255,255,.5))}.sv-author-info--avatar-badge{position:relative;display:flex;flex-direction:column;align-items:center;width:auto;gap:0}.sv-author-info--avatar-badge .sv-author-info__avatar{width:var(--sv-avatar-badge-size,48px);height:var(--sv-avatar-badge-size,48px);border:2px solid var(--sv-avatar-badge-border,#fff)}.sv-author-info--avatar-badge .sv-author-info__follow-btn{position:absolute;bottom:var(--sv-avatar-badge-btn-bottom,-10px);left:50%;transform:translateX(-50%);min-width:unset;width:var(--sv-avatar-badge-btn-size,24px);height:var(--sv-avatar-badge-btn-size,24px);padding:0;border-radius:50%;background:var(--sv-color-primary,#fe2c55);border:2px solid var(--sv-bg-primary,#000);z-index:1}.sv-author-info--avatar-badge .sv-author-info__follow-btn:hover:not(:disabled){transform:translateX(-50%)scale(1.1)}.sv-author-info--avatar-badge .sv-author-info__follow-btn:active:not(:disabled){transform:translateX(-50%)scale(.95)}.sv-author-info--avatar-badge .sv-author-info__follow-btn-icon{width:var(--sv-avatar-badge-icon-size,14px);height:var(--sv-avatar-badge-icon-size,14px)}.sv-author-info--avatar-badge .sv-author-info__follow-btn--following{display:none}.sv-author-info--avatar-badge .sv-author-info__content{display:none}.sv-author-info--avatar-badge{margin-bottom:var(--sv-avatar-badge-margin,16px)}`;
+function DefaultVerifiedIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z" }) });
+}
+function AuthorName({
+  name,
+  showAtPrefix = false,
+  showVerified = false,
+  verifiedIcon,
+  onClick,
+  className,
+  children
+}) {
+  const context = useOptionalAuthorInfoContext();
+  const displayName = name ?? context?.author.name ?? "Unknown";
+  const isVerified = context?.author.isVerified ?? false;
+  const handleClick = onClick ?? context?.openProfile;
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && handleClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "sv-author-info__name",
+        showAtPrefix && "sv-author-info__name--with-at",
+        className
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick?.();
+      },
+      onKeyDown: handleKeyDown,
+      role: handleClick ? "button" : void 0,
+      tabIndex: handleClick ? 0 : void 0,
+      "aria-label": handleClick ? `View ${displayName}'s profile` : void 0,
+      children: [
+        children ?? /* @__PURE__ */ jsx("span", { className: "sv-author-info__name-text", children: displayName }),
+        showVerified && isVerified && /* @__PURE__ */ jsx("span", { className: "sv-author-info__name-verified", "aria-label": "Verified", children: verifiedIcon ?? /* @__PURE__ */ jsx(DefaultVerifiedIcon, {}) })
+      ]
+    }
+  );
+}
+function DefaultFollowIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx("line", { x1: "20", y1: "8", x2: "20", y2: "14" }),
+    /* @__PURE__ */ jsx("line", { x1: "23", y1: "11", x2: "17", y2: "11" })
+  ] });
+}
+function DefaultFollowingIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "17 11 19 13 23 9" })
+  ] });
+}
+var SIZE_CLASS_MAP2 = {
+  small: "sv-author-info__follow-btn--small",
+  default: "",
+  large: "sv-author-info__follow-btn--large"
+};
+function ButtonIcon({
+  isPending,
+  isFollowing,
+  followIcon,
+  followingIcon
+}) {
+  if (isPending) {
+    return /* @__PURE__ */ jsx("span", { className: "sv-author-info__follow-btn-spinner" });
+  }
+  const icon = isFollowing ? followingIcon ?? /* @__PURE__ */ jsx(DefaultFollowingIcon, {}) : followIcon ?? /* @__PURE__ */ jsx(DefaultFollowIcon, {});
+  return /* @__PURE__ */ jsx("span", { className: "sv-author-info__follow-btn-icon", children: icon });
+}
+function FollowButton({
+  isFollowing: isFollowingProp,
+  isPending: isPendingProp,
+  onClick,
+  size = "default",
+  iconOnly = false,
+  followIcon,
+  followingIcon,
+  followText = "Follow",
+  followingText = "Following",
+  disabled = false,
+  className,
+  children,
+  followAriaLabel = "Follow",
+  unfollowAriaLabel = "Unfollow"
+}) {
+  const context = useOptionalAuthorInfoContext();
+  const isFollowing = isFollowingProp ?? context?.isFollowing ?? false;
+  const isPending = isPendingProp ?? context?.isFollowPending ?? false;
+  const handleClick = onClick ?? context?.toggleFollow;
+  const isDisabled = disabled || isPending;
+  const stateClass = isFollowing ? "sv-author-info__follow-btn--following" : "sv-author-info__follow-btn--default";
+  const buttonText = isFollowing ? followingText : followText;
+  const handleButtonClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!isDisabled) {
+      handleClick?.();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && !isDisabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick?.();
+    }
+  };
+  const stopPropagation = (e) => e.stopPropagation();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx(
+        "sv-author-info__follow-btn",
+        stateClass,
+        isPending && "sv-author-info__follow-btn--pending",
+        iconOnly && "sv-author-info__follow-btn--icon-only",
+        SIZE_CLASS_MAP2[size],
+        className
+      ),
+      onClick: handleButtonClick,
+      onKeyDown: handleKeyDown,
+      onPointerDown: stopPropagation,
+      onPointerUp: stopPropagation,
+      onTouchStart: stopPropagation,
+      onTouchEnd: stopPropagation,
+      disabled: isDisabled,
+      "aria-pressed": isFollowing,
+      "aria-label": isFollowing ? unfollowAriaLabel : followAriaLabel,
+      "aria-busy": isPending,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          ButtonIcon,
+          {
+            isPending,
+            isFollowing,
+            followIcon: followIcon ?? /* @__PURE__ */ jsx(PlusIcon, { size: 14 }),
+            followingIcon
+          }
+        ),
+        !iconOnly && /* @__PURE__ */ jsx("span", { children: buttonText })
+      ] })
+    }
+  );
+}
+var CSS_COMPONENT_ID = "author-info";
+function AuthorInfoContent({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx("sv-author-info__content", className), children });
+}
+function AuthorInfoHeadlessRoot({
+  authorState,
+  authorActions,
+  showFollowButton = true,
+  variant = "horizontal",
+  overlay = false,
+  className,
+  children
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS(CSS_COMPONENT_ID, AUTHOR_INFO_CSS);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      author: authorState.author,
+      isFollowing: authorState.isFollowing,
+      isFollowPending: authorState.isFollowPending,
+      toggleFollow: () => {
+        authorActions.toggleFollow();
+      },
+      openProfile: () => {
+        authorActions.openProfile();
+      }
+    }),
+    [authorState, authorActions]
+  );
+  const variantClass = `sv-author-info--${variant}`;
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsx(AuthorInfoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "sv-author-info",
+        variantClass,
+        overlay && "sv-author-info--overlay",
+        className
+      ),
+      onClick: stopPropagation,
+      onPointerDown: stopPropagation,
+      onPointerUp: stopPropagation,
+      onTouchStart: stopPropagation,
+      onTouchEnd: stopPropagation,
+      children: children ? children : variant === "avatar-badge" ? (
+        // Default layout for avatar-badge variant
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AuthorAvatar, {}),
+          showFollowButton && /* @__PURE__ */ jsx(FollowButton, { iconOnly: true })
+        ] })
+      ) : (
+        // Default layout when no children provided
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AuthorAvatar, { showVerified: true }),
+          /* @__PURE__ */ jsx(AuthorInfoContent, { children: /* @__PURE__ */ jsx(AuthorName, { showAtPrefix: true, showVerified: true }) }),
+          showFollowButton && /* @__PURE__ */ jsx(FollowButton, {})
+        ] })
+      )
+    }
+  ) });
+}
+var AuthorInfoHeadless = Object.assign(AuthorInfoHeadlessRoot, {
+  /** Avatar sub-component */
+  Avatar: AuthorAvatar,
+  /** Name sub-component */
+  Name: AuthorName,
+  /** Description/bio sub-component */
+  Description: AuthorDescription,
+  /** Follow button sub-component */
+  FollowButton,
+  /** Content wrapper for name + description */
+  Content: AuthorInfoContent
+});
+
+export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext };

package/dist/chunk-4RIMQOBR.js

@@ -0,0 +1,58 @@
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { useInsertionEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Skeleton/Skeleton.css.ts
+var SKELETON_CSS = `.sv-skeleton{display:block;background:var(--sv-skeleton-bg,rgba(255,255,255,.1));border-radius:var(--sv-border-radius-sm,4px)}.sv-skeleton--pulse{animation:sv-skeleton-pulse 1.5s ease-in-out infinite}@keyframes sv-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.4}}.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,.1),transparent);animation:sv-skeleton-wave 1.5s ease-in-out infinite}@keyframes sv-skeleton-wave{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.sv-skeleton-video{width:100%;height:100%;background:var(--sv-bg-primary,#000)}:root[data-theme="light"] .sv-skeleton,.light .sv-skeleton{background:var(--sv-skeleton-bg-light,rgba(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,.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 };

package/dist/chunk-5MKYDI4X.js

@@ -0,0 +1 @@
+