@xhub-short/ui 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/{chunk-4YDIRPIN.js → chunk-ANCP53F3.js}

@@ -110,10 +110,10 @@ function BookmarkFilledIcon(props) {
   ) });
 }
 function PlayIcon(props) {
-  return /* @__PURE__ */ jsx("svg", { ...getIconProps(props), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", ...getIconProps(props), children: /* @__PURE__ */ jsx(
     "path",
     {
-      d: "M17.0089 3.45151C12.3423 0.748041 6.5 4.11533 6.5 9.50852V38.4835C6.5 43.8767 12.3423 47.244 17.0089 44.5405L42.0169 30.053C46.6717 27.3565 46.6717 20.6356 42.0169 17.939L17.0089 3.45151Z",
+      d: "M9.92196 2.01322C7.19974 0.436195 3.79175 2.40044 3.79175 5.54647V22.4486C3.79175 25.5946 7.19974 27.5588 9.92195 25.9818L24.5099 17.5308C27.2252 15.9578 27.2252 12.0373 24.5099 10.4643L9.92196 2.01322Z",
       fill: "currentColor"
     }
   ) });
@@ -122,7 +122,7 @@ function PauseIcon(props) {
   return /* @__PURE__ */ jsx("svg", { ...getIconProps(props), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
     "path",
     {
-      d: "M20.751 3.6V20.4C20.751 21.036 20.751 21.42 20.561 21.794C20.392 22.126 20.127 22.391 19.796 22.559C19.422 22.749 19.038 22.749 18.401 22.749H16.601C15.965 22.749 15.58 22.749 15.206 22.559C14.875 22.391 14.61 22.126 14.441 21.794C14.25 21.419 14.25 21.035 14.25 20.399V3.6C14.25 2.964 14.25 2.58 14.44 2.206C14.609 1.874 14.874 1.609 15.205 1.441C15.579 1.25 15.963 1.25 16.6 1.25H18.4C19.037 1.25 19.421 1.25 19.796 1.441C20.126 1.609 20.391 1.874 20.56 2.205C20.751 2.58 20.751 2.964 20.751 3.6ZM8.796 1.441C8.421 1.25 8.037 1.25 7.4 1.25H5.6C4.963 1.25 4.579 1.25 4.205 1.441C3.873 1.61 3.608 1.875 3.44 2.206C3.25 2.58 3.25 2.964 3.25 3.6V20.4C3.25 21.036 3.25 21.42 3.44 21.793C3.609 22.125 3.874 22.39 4.206 22.559C4.58 22.749 4.964 22.749 5.601 22.749H7.401C8.037 22.749 8.422 22.749 8.796 22.559C9.127 22.391 9.392 22.126 9.561 21.794C9.751 21.42 9.751 21.036 9.751 20.4V3.6C9.751 2.964 9.751 2.58 9.56 2.205C9.391 1.873 9.126 1.609 8.796 1.441Z",
+      d: "M24.2096 4.20016V23.8002C24.2096 24.5422 24.2096 24.9902 23.9879 25.4265C23.7907 25.8138 23.4816 26.123 23.0954 26.319C22.6591 26.5407 22.2111 26.5407 21.4679 26.5407H19.3679C18.6259 26.5407 18.1767 26.5407 17.7404 26.319C17.3542 26.123 17.0451 25.8138 16.8479 25.4265C16.6251 24.989 16.6251 24.541 16.6251 23.799V4.20016C16.6251 3.45816 16.6251 3.01016 16.8467 2.57383C17.0439 2.1865 17.3531 1.87733 17.7393 1.68133C18.1756 1.4585 18.6236 1.4585 19.3667 1.4585H21.4667C22.2099 1.4585 22.6579 1.4585 23.0954 1.68133C23.4804 1.87733 23.7896 2.1865 23.9867 2.57266C24.2096 3.01016 24.2096 3.45816 24.2096 4.20016ZM10.2621 1.68133C9.82458 1.4585 9.37658 1.4585 8.63342 1.4585H6.53341C5.79025 1.4585 5.34225 1.4585 4.90591 1.68133C4.51858 1.8785 4.20941 2.18766 4.01341 2.57383C3.79175 3.01016 3.79175 3.45816 3.79175 4.20016V23.8002C3.79175 24.5422 3.79175 24.9902 4.01341 25.4253C4.21058 25.8127 4.51975 26.1218 4.90708 26.319C5.34341 26.5407 5.79141 26.5407 6.53458 26.5407H8.63458C9.37658 26.5407 9.82575 26.5407 10.2621 26.319C10.6482 26.123 10.9574 25.8138 11.1546 25.4265C11.3762 24.9902 11.3762 24.5422 11.3762 23.8002V4.20016C11.3762 3.45816 11.3762 3.01016 11.1534 2.57266C10.9562 2.18533 10.6471 1.87733 10.2621 1.68133Z",
       fill: "currentColor"
     }
   ) });

package/dist/{chunk-UXMA4KJZ.js → chunk-CAWE42LH.js}

@@ -1,7 +1,8 @@
 // src/utils/injectComponentCSS.ts
 var injectedStyles = /* @__PURE__ */ new Set();
 var STYLE_ID_PREFIX = "sv-styles-";
-function injectComponentCSS(componentId, css) {
+function injectComponentCSS(componentId, css, options = {}) {
+  const { layered = true } = options;
   if (typeof document === "undefined") {
     return () => {
     };
@@ -20,11 +21,12 @@ function injectComponentCSS(componentId, css) {
   const style = document.createElement("style");
   style.id = styleId;
   style.setAttribute("data-sv-component", componentId);
-  style.textContent = css;
+  style.textContent = layered ? `@layer sv {
+${css}
+}` : css;
   document.head.appendChild(style);
   injectedStyles.add(componentId);
   return () => {
-    removeComponentCSS(componentId);
   };
 }
 function removeComponentCSS(componentId) {

package/dist/{chunk-ANGBSV7L.js → chunk-CIIZ3IHV.js}

@@ -1,5 +1,6 @@
-import { cn, formatCount } from './chunk-WKX2WBVO.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { formatCount } from './chunk-3XPJHUYL.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { clsx } from 'clsx';
 import { createContext, useInsertionEffect, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -339,6 +340,7 @@ function ActionButton({
   const handleTouchEnd = useCallback(
     (e) => {
       e.stopPropagation();
+      e.preventDefault();
       if (!disabled && onClick) {
         onClick();
       }
@@ -360,7 +362,7 @@ function ActionButton({
   const formattedCount = count !== void 0 ? formatter(count) : null;
   const shouldShowCount = count !== void 0 && (!hideZeroCount || count > 0);
   const displayIcon = isActive && activeIcon ? activeIcon : icon;
-  const buttonClasses = cn(
+  const buttonClasses = clsx(
     CSS_PREFIX,
     variant !== "default" && `${CSS_PREFIX}--${variant}`,
     type !== "default" && `${CSS_PREFIX}--${type}`,
@@ -389,7 +391,10 @@ function ActionButton({
         shouldShowCount && /* @__PURE__ */ jsx(
           "span",
           {
-            className: cn(`${CSS_PREFIX}__count`, !shouldShowCount && `${CSS_PREFIX}__count--hidden`),
+            className: clsx(
+              `${CSS_PREFIX}__count`,
+              !shouldShowCount && `${CSS_PREFIX}__count--hidden`
+            ),
             children: formattedCount
           }
         )
@@ -443,7 +448,7 @@ function ActionBarHeadlessRoot({
     interactionState,
     interactionActions
   };
-  const containerClasses = cn(
+  const containerClasses = clsx(
     CSS_PREFIX2,
     direction === "horizontal" && `${CSS_PREFIX2}--horizontal`,
     className

package/dist/chunk-DR7KR7OT.js

@@ -0,0 +1,103 @@
+import { clsx } from 'clsx';
+import { memo, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/QualityPicker/QualityPickerHeadless.tsx
+
+// src/components/QualityPicker/QualityPicker.css.ts
+var QUALITY_PICKER_CSS = `.sv-quality-picker{--sv-quality-picker-bg:rgba(28,28,30,.95);--sv-quality-picker-text:#fff;--sv-quality-picker-text-secondary:rgba(255,255,255,.6);--sv-quality-picker-selected:#007aff;--sv-quality-picker-item-hover:rgba(255,255,255,.1);--sv-quality-picker-check:#007aff;--sv-quality-picker-badge:rgba(255,255,255,.15);--sv-quality-picker-item-height:48px;--sv-quality-picker-radius:12px;--sv-quality-picker-padding:8px}.sv-quality-picker{padding:var(--sv-quality-picker-padding)}.sv-quality-picker-title{padding:8px 16px;font-size:14px;font-weight:600;color:var(--sv-quality-picker-text-secondary);text-align:center}.sv-quality-picker-options{display:flex;flex-direction:column;gap:2px}.sv-quality-picker-option{display:flex;align-items:center;gap:12px;height:var(--sv-quality-picker-item-height);padding:0 16px;border:0;background:transparent;color:var(--sv-quality-picker-text);font-size:16px;font-weight:normal;cursor:pointer;border-radius:var(--sv-quality-picker-radius);transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.sv-quality-picker-option:hover{background:var(--sv-quality-picker-item-hover)}.sv-quality-picker-option[data-selected="true"]{color:var(--sv-quality-picker-selected);font-weight:500}.sv-quality-picker-option-label{flex:1;display:flex;align-items:center;gap:8px}.sv-quality-picker-option-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;background:var(--sv-quality-picker-badge);border-radius:4px;color:var(--sv-quality-picker-text-secondary)}.sv-quality-picker-option[data-selected="true"] .sv-quality-picker-option-badge{background:var(--sv-quality-picker-selected);color:#fff}.sv-quality-picker-option-check{width:20px;height:20px;color:var(--sv-quality-picker-check);opacity:0;transition:opacity 150ms ease}.sv-quality-picker-option[data-selected="true"] .sv-quality-picker-option-check{opacity:1}.sv-quality-picker-empty{padding:24px 16px;text-align:center;color:var(--sv-quality-picker-text-secondary);font-size:14px}`;
+var cssInjected = false;
+function injectCSS() {
+  if (cssInjected || typeof document === "undefined") return;
+  const styleId = "sv-quality-picker-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = QUALITY_PICKER_CSS;
+    document.head.appendChild(style);
+  }
+  cssInjected = true;
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+}
+function getQualityBadge(height) {
+  if (height >= 2160) return "4K";
+  if (height >= 1080) return "FHD";
+  if (height >= 720) return "HD";
+  return null;
+}
+function formatQualityLabel(level) {
+  return `${level.height}p`;
+}
+function QualityPickerHeadlessComponent({
+  quality,
+  levels,
+  onQualityChange,
+  title = "Quality",
+  className,
+  onClose,
+  autoClose = true,
+  showAuto = true,
+  autoLabel = "Auto",
+  emptyMessage = "No quality options available"
+}) {
+  useEffect(() => {
+    injectCSS();
+  }, []);
+  const handleSelect = useCallback(
+    (level) => {
+      onQualityChange(level);
+      if (autoClose && onClose) {
+        onClose();
+      }
+    },
+    [onQualityChange, autoClose, onClose]
+  );
+  const sortedLevels = [...levels].sort((a, b) => b.height - a.height);
+  const isEmpty = sortedLevels.length === 0;
+  return /* @__PURE__ */ jsxs("div", { className: clsx("sv-quality-picker", className), "aria-label": title, children: [
+    title && /* @__PURE__ */ jsx("div", { className: "sv-quality-picker-title", children: title }),
+    isEmpty ? /* @__PURE__ */ jsx("div", { className: "sv-quality-picker-empty", children: emptyMessage }) : /* @__PURE__ */ jsxs("div", { className: "sv-quality-picker-options", children: [
+      showAuto && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "sv-quality-picker-option",
+          "data-selected": quality === -1,
+          onClick: () => handleSelect(-1),
+          "aria-selected": quality === -1,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "sv-quality-picker-option-label", children: autoLabel }),
+            /* @__PURE__ */ jsx("span", { className: "sv-quality-picker-option-check", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+          ]
+        }
+      ),
+      sortedLevels.map((level, index) => {
+        const isSelected = quality === index;
+        const badge = getQualityBadge(level.height);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "sv-quality-picker-option",
+            "data-selected": isSelected,
+            onClick: () => handleSelect(index),
+            "aria-selected": isSelected,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "sv-quality-picker-option-label", children: [
+                formatQualityLabel(level),
+                badge && /* @__PURE__ */ jsx("span", { className: "sv-quality-picker-option-badge", children: badge })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "sv-quality-picker-option-check", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+            ]
+          },
+          level.height
+        );
+      })
+    ] })
+  ] });
+}
+var QualityPickerHeadless = memo(QualityPickerHeadlessComponent);
+
+export { QUALITY_PICKER_CSS, QualityPickerHeadless };

package/dist/chunk-DXLCQ4FH.js

@@ -0,0 +1,102 @@
+import { BottomSheetHeadless, useBottomSheetContext } from './chunk-PJ4NMVMY.js';
+import { clsx } from 'clsx';
+import { memo, useEffect, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/AdvanceMenu/AdvanceMenu.css.ts
+var ADVANCE_MENU_CSS = `.sv-advance-menu{--sv-advance-menu-bg:rgba(28,28,30,.95);--sv-advance-menu-border:rgba(255,255,255,.1);--sv-advance-menu-text:#fff;--sv-advance-menu-text-secondary:rgba(255,255,255,.6);--sv-advance-menu-backdrop:rgba(0,0,0,.5);--sv-advance-menu-item-hover:rgba(255,255,255,.1);--sv-advance-menu-item-active:rgba(255,255,255,.15);--sv-advance-menu-danger:#ff453a;--sv-advance-menu-icon:rgba(255,255,255,.8);--sv-advance-menu-radius:16px;--sv-advance-menu-item-height:52px;--sv-advance-menu-padding:8px;--sv-advance-menu-icon-size:24px;--sv-advance-menu-gap:12px;--sv-sheet-bg:var(--sv-advance-menu-bg);--sv-sheet-border-radius:var(--sv-advance-menu-radius);--sv-sheet-handle-bg:var(--sv-advance-menu-border)}.sv-advance-menu-backdrop{--sv-sheet-backdrop-bg:var(--sv-advance-menu-backdrop)}.sv-advance-menu-sheet{padding-bottom:env(safe-area-inset-bottom,0)}.sv-advance-menu-items{padding:var(--sv-advance-menu-padding);display:flex;flex-direction:column;gap:2px}.sv-advance-menu-item{display:flex;align-items:center;gap:var(--sv-advance-menu-gap);height:var(--sv-advance-menu-item-height);padding:0 16px;border:0;background:transparent;color:var(--sv-advance-menu-text);font-size:16px;font-weight:normal;text-align:left;cursor:pointer;border-radius:12px;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.sv-advance-menu-item:hover:not(:disabled){background:var(--sv-advance-menu-item-hover)}.sv-advance-menu-item:active:not(:disabled){background:var(--sv-advance-menu-item-active)}.sv-advance-menu-item:disabled{opacity:.5;cursor:not-allowed}.sv-advance-menu-item[data-danger="true"]{color:var(--sv-advance-menu-danger)}.sv-advance-menu-item[data-danger="true"] .sv-advance-menu-item-icon{color:var(--sv-advance-menu-danger)}.sv-advance-menu-item-icon{width:var(--sv-advance-menu-icon-size);height:var(--sv-advance-menu-icon-size);color:var(--sv-advance-menu-icon);flex-shrink:0;display:flex;align-items:center;justify-content:center}.sv-advance-menu-item-icon svg{width:100%;height:100%}.sv-advance-menu-item-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-advance-menu-item-value{color:var(--sv-advance-menu-text-secondary);font-size:14px}.sv-advance-menu-separator{height:1px;background:var(--sv-advance-menu-border);margin:8px 16px}.sv-advance-menu-section-title{padding:8px 16px 4px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--sv-advance-menu-text-secondary)}`;
+var cssInjected = false;
+function injectCSS() {
+  if (cssInjected || typeof document === "undefined") return;
+  const styleId = "sv-advance-menu-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = ADVANCE_MENU_CSS;
+    document.head.appendChild(style);
+  }
+  cssInjected = true;
+}
+function AdvanceMenuHeadlessComponent({
+  isOpen,
+  onClose,
+  children,
+  className,
+  sheetClassName,
+  backdropClassName,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  showDragHandle = true,
+  ariaLabel = "Menu"
+}) {
+  useEffect(() => {
+    injectCSS();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    BottomSheetHeadless,
+    {
+      isOpen,
+      onClose,
+      height: "auto",
+      className: clsx("sv-advance-menu", "sv-advance-menu-sheet", sheetClassName, className),
+      backdropClassName: clsx("sv-advance-menu-backdrop", backdropClassName),
+      contentClassName: "sv-advance-menu-items",
+      closeOnBackdropClick,
+      closeOnEscape,
+      showDragHandle,
+      ariaLabel,
+      children
+    }
+  );
+}
+function AdvanceMenuItem({
+  icon,
+  label,
+  value,
+  onClick,
+  disabled = false,
+  danger = false,
+  className,
+  closeOnClick = false
+}) {
+  const { onClose } = useBottomSheetContext();
+  const handleClick = useCallback(() => {
+    if (disabled) return;
+    onClick?.();
+    if (closeOnClick) {
+      onClose();
+    }
+  }, [disabled, onClick, closeOnClick, onClose]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: clsx("sv-advance-menu-item", className),
+      onClick: handleClick,
+      disabled,
+      "data-danger": danger,
+      role: "menuitem",
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "sv-advance-menu-item-icon", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "sv-advance-menu-item-label", children: label }),
+        value && /* @__PURE__ */ jsx("span", { className: "sv-advance-menu-item-value", children: value })
+      ]
+    }
+  );
+}
+function AdvanceMenuSeparator({ className }) {
+  return /* @__PURE__ */ jsx("div", { className: clsx("sv-advance-menu-separator", className) });
+}
+function AdvanceMenuSectionTitle({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx("sv-advance-menu-section-title", className), children });
+}
+var AdvanceMenuHeadless = Object.assign(memo(AdvanceMenuHeadlessComponent), {
+  Item: memo(AdvanceMenuItem),
+  Separator: memo(AdvanceMenuSeparator),
+  SectionTitle: memo(AdvanceMenuSectionTitle)
+});
+
+export { ADVANCE_MENU_CSS, AdvanceMenuHeadless };

package/dist/chunk-EDWS2IPH.js

@@ -0,0 +1 @@
+export { clsx, clsx as clsx2 } from 'clsx';