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

package/dist/chunk-HXQPEZRG.js

@@ -0,0 +1,105 @@
+import { BottomSheetHeadless, useBottomSheetContext } from './chunk-UYBQTE4M.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,rgba(0,0,0,.5))}.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",
+  onGestureLock
+}) {
+  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,
+      scrollContainerSelector: ".sv-advance-menu-items",
+      onGestureLock,
+      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 };