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

package/dist/chunk-QCKVF2DR.js

@@ -0,0 +1,713 @@
+import { BottomSheetHeadless } from './chunk-PJ4NMVMY.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { clsx } from 'clsx';
+import { memo, useState, useEffect, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/ReportSheet/ReportSheet.css.ts
+var REPORT_SHEET_CSS = (
+  /* 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
+   CSS VARIABLES
+   \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-report-sheet {
+  /* Colors */
+  --sv-report-bg: #1a1a1a;
+  --sv-report-text: rgba(255, 255, 255, 0.95);
+  --sv-report-text-muted: rgba(255, 255, 255, 0.6);
+  --sv-report-border: rgba(255, 255, 255, 0.1);
+  --sv-report-error: #ef4444;
+  --sv-report-success: #22c55e;
+  --sv-report-primary: #3b82f6;
+  --sv-report-item-hover: rgba(255, 255, 255, 0.05);
+  
+  /* Spacing */
+  --sv-report-padding: 16px;
+  --sv-report-gap: 12px;
+  --sv-report-radius: 8px;
+  
+  /* Override BottomSheet */
+  --sv-sheet-bg: var(--sv-report-bg);
+}
+
+/* \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
+   HEADER
+   \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-report-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: var(--sv-report-padding);
+  border-bottom: 1px solid var(--sv-report-border);
+  min-height: 56px;
+}
+
+.sv-report-title {
+  flex: 1;
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--sv-report-text);
+  margin: 0;
+  text-align: center;
+}
+
+/* When back button is present, title should still be centered */
+.sv-report-header .sv-report-back + .sv-report-title {
+  margin-left: -32px; /* Compensate for back button */
+}
+
+.sv-report-close,
+.sv-report-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  flex-shrink: 0;
+  
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  
+  color: var(--sv-report-text-muted);
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.sv-report-close:hover,
+.sv-report-back:hover {
+  background: var(--sv-report-item-hover);
+  color: var(--sv-report-text);
+}
+
+/* \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
+   CONTENT
+   \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-report-content {
+  padding: 0;
+  max-height: 50vh;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.sv-report-content--detail {
+  padding: var(--sv-report-padding);
+}
+
+/* \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
+   STEP 1: REASON LIST
+   \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-report-reasons {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sv-report-reason-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 16px var(--sv-report-padding);
+  
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--sv-report-border);
+  
+  color: var(--sv-report-text);
+  font-size: 15px;
+  text-align: left;
+  
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+.sv-report-reason-item:last-child {
+  border-bottom: none;
+}
+
+.sv-report-reason-item:hover {
+  background: var(--sv-report-item-hover);
+}
+
+.sv-report-reason-item:active {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.sv-report-reason-item .sv-report-reason-label {
+  flex: 1;
+}
+
+.sv-report-reason-item svg {
+  flex-shrink: 0;
+  color: var(--sv-report-text-muted);
+}
+
+/* \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 LOADING
+   \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-report-reasons--loading {
+  pointer-events: none;
+}
+
+.sv-report-reason-skeleton {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px var(--sv-report-padding);
+  border-bottom: 1px solid var(--sv-report-border);
+}
+
+.sv-report-reason-skeleton:last-child {
+  border-bottom: none;
+}
+
+.sv-report-skeleton-text {
+  flex: 1;
+  height: 16px;
+  max-width: 200px;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.06) 25%,
+    rgba(255, 255, 255, 0.12) 50%,
+    rgba(255, 255, 255, 0.06) 75%
+  );
+  background-size: 200% 100%;
+  border-radius: 4px;
+  animation: sv-report-skeleton-shimmer 1.5s infinite;
+}
+
+.sv-report-skeleton-icon {
+  width: 20px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+}
+
+@keyframes sv-report-skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* \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
+   STEP 2: REASON DETAIL
+   \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-report-reason-title {
+  margin: 0 0 var(--sv-report-gap);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--sv-report-text);
+}
+
+.sv-report-reason-description {
+  margin: 0 0 var(--sv-report-gap);
+  padding: 12px 16px;
+  
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--sv-report-radius);
+  
+  font-size: 14px;
+  color: var(--sv-report-text-muted);
+  line-height: 1.5;
+}
+
+/* \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
+   TEXT INPUT
+   \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-report-input-section {
+  margin-top: var(--sv-report-gap);
+}
+
+.sv-report-textarea {
+  width: 100%;
+  min-height: 120px;
+  padding: 12px;
+  
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--sv-report-border);
+  border-radius: var(--sv-report-radius);
+  
+  color: var(--sv-report-text);
+  font-size: 14px;
+  font-family: inherit;
+  line-height: 1.5;
+  resize: vertical;
+  
+  transition: border-color 150ms ease;
+}
+
+.sv-report-textarea::placeholder {
+  color: var(--sv-report-text-muted);
+}
+
+.sv-report-textarea:focus {
+  outline: none;
+  border-color: var(--sv-report-primary);
+}
+
+.sv-report-char-count {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--sv-report-text-muted);
+  text-align: right;
+}
+
+.sv-report-char-count[data-over="true"] {
+  color: var(--sv-report-error);
+}
+
+/* \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
+   FOOTER
+   \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-report-footer {
+  display: flex;
+  gap: 12px;
+  padding: var(--sv-report-padding);
+  border-top: 1px solid var(--sv-report-border);
+}
+
+.sv-report-footer--single {
+  /* Single button layout */
+}
+
+.sv-report-button {
+  flex: 1;
+  padding: 14px 20px;
+  
+  border: none;
+  border-radius: var(--sv-report-radius);
+  
+  font-size: 15px;
+  font-weight: 600;
+  
+  cursor: pointer;
+  transition: background 150ms ease, opacity 150ms ease;
+}
+
+.sv-report-button-submit {
+  background: var(--sv-report-primary);
+  color: white;
+}
+
+.sv-report-button-submit:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.sv-report-button-submit:active:not(:disabled) {
+  background: #1d4ed8;
+}
+
+.sv-report-button-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* \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
+   LOADING & SUCCESS STATES
+   \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-report-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px 24px;
+  color: var(--sv-report-text-muted);
+}
+
+.sv-report-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--sv-report-border);
+  border-top-color: var(--sv-report-primary);
+  border-radius: 50%;
+  animation: sv-report-spin 0.8s linear infinite;
+}
+
+@keyframes sv-report-spin {
+  to { transform: rotate(360deg); }
+}
+
+.sv-report-success {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 48px 24px;
+  text-align: center;
+}
+
+.sv-report-success-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--sv-report-success);
+}
+
+.sv-report-success-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--sv-report-text);
+}
+
+.sv-report-success-message {
+  margin: 0;
+  font-size: 14px;
+  color: var(--sv-report-text-muted);
+}
+
+/* \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
+   ERROR STATE
+   \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-report-error-message {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  margin-bottom: var(--sv-report-gap);
+  
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: var(--sv-report-radius);
+  
+  color: var(--sv-report-error);
+  font-size: 14px;
+}
+`
+);
+function injectReportSheetCSS() {
+  injectComponentCSS("report-sheet", REPORT_SHEET_CSS, { layered: false });
+}
+if (typeof document !== "undefined") {
+  injectReportSheetCSS();
+}
+var DEFAULT_MAX_LENGTH = 500;
+var DEFAULT_REASONS = [
+  {
+    id: "spam",
+    label: "Spam",
+    description: "Repetitive posts, fake engagement, or misleading content."
+  },
+  {
+    id: "inappropriate",
+    label: "Inappropriate content",
+    description: "Nudity, sexual content, or content not suitable for all audiences."
+  },
+  {
+    id: "violence",
+    label: "Violence or dangerous activities",
+    description: "Graphic violence, threats, or promotion of dangerous behavior."
+  },
+  {
+    id: "harassment",
+    label: "Harassment or bullying",
+    description: "Targeting individuals with abuse, threats, or unwanted behavior."
+  },
+  {
+    id: "misinformation",
+    label: "Misinformation",
+    description: "False or misleading information that could cause harm."
+  },
+  {
+    id: "copyright",
+    label: "Copyright violation",
+    description: "Content that infringes on intellectual property rights."
+  },
+  {
+    id: "other",
+    label: "Other",
+    description: "Other issues not covered by the categories above."
+  }
+];
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function BackIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+    }
+  );
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "48",
+      height: "48",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
+      ]
+    }
+  );
+}
+function ReportSheetHeadlessComponent({
+  isOpen,
+  onClose,
+  onSubmit,
+  reasons = DEFAULT_REASONS,
+  isLoadingReasons = false,
+  maxLength = DEFAULT_MAX_LENGTH,
+  alreadyReported = false,
+  // Labels
+  selectTitle = "Please select a reason",
+  title = "Report",
+  inputPlaceholder = "Tell us more about the issue (optional)...",
+  submitText = "Submit Report",
+  loadingText = "Submitting...",
+  successTitle = "Report Submitted",
+  successMessage = "Thank you for helping keep our community safe.",
+  doneText = "Done",
+  errorMessage = "Failed to submit report. Please try again.",
+  errorDescription = "Please try again or contact support if the problem persists.",
+  // Customization
+  successIcon,
+  className
+}) {
+  const [step, setStep] = useState("select");
+  const [state, setState] = useState("form");
+  const [selectedReason, setSelectedReason] = useState(null);
+  const [description, setDescription] = useState("");
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    injectReportSheetCSS();
+  }, []);
+  useEffect(() => {
+    if (isOpen) {
+      if (alreadyReported) {
+        setState("success");
+        setStep("select");
+      } else {
+        setStep("select");
+        setState("form");
+      }
+      setSelectedReason(null);
+      setDescription("");
+      setError(null);
+    }
+  }, [isOpen, alreadyReported]);
+  const handleDone = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  const handleReasonSelect = useCallback((reason) => {
+    setSelectedReason(reason);
+    setStep("detail");
+    setError(null);
+  }, []);
+  const handleBack = useCallback(() => {
+    setStep("select");
+    setError(null);
+  }, []);
+  const handleDescriptionChange = useCallback(
+    (e) => {
+      const value = e.target.value;
+      if (value.length <= maxLength) {
+        setDescription(value);
+      }
+    },
+    [maxLength]
+  );
+  const handleSubmit = useCallback(async () => {
+    if (!selectedReason) return;
+    setState("loading");
+    setError(null);
+    try {
+      await onSubmit(selectedReason.id, description || void 0);
+      setState("success");
+    } catch (err) {
+      setState("error");
+      setError(err instanceof Error ? err.message : errorMessage);
+    }
+  }, [selectedReason, description, onSubmit, errorMessage]);
+  const handleClose = useCallback(() => {
+    if (state === "loading") return;
+    onClose();
+  }, [state, onClose]);
+  const renderReasonSkeleton = () => /* @__PURE__ */ jsx("ul", { className: "sv-report-reasons sv-report-reasons--loading", "aria-busy": "true", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "sv-report-reason-skeleton", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-report-skeleton-text" }),
+    /* @__PURE__ */ jsx("div", { className: "sv-report-skeleton-icon" })
+  ] }) }, i)) });
+  const renderSelectStep = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "sv-report-header", children: [
+      /* @__PURE__ */ jsx("h2", { className: "sv-report-title", children: selectTitle }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "sv-report-close", onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sv-report-content", children: isLoadingReasons ? renderReasonSkeleton() : /* @__PURE__ */ jsx("ul", { className: "sv-report-reasons", "aria-label": "Report reasons", children: reasons.map((reason) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "sv-report-reason-item",
+        onClick: () => handleReasonSelect(reason),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sv-report-reason-label", children: reason.label }),
+          /* @__PURE__ */ jsx(ChevronRightIcon, {})
+        ]
+      }
+    ) }, reason.id)) }) })
+  ] });
+  const renderDetailStep = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "sv-report-header", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "sv-report-back", onClick: handleBack, "aria-label": "Back", children: /* @__PURE__ */ jsx(BackIcon, {}) }),
+      /* @__PURE__ */ jsx("h2", { className: "sv-report-title", children: title }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "sv-report-close", onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "sv-report-content sv-report-content--detail", children: [
+      /* @__PURE__ */ jsx("h3", { className: "sv-report-reason-title", children: selectedReason?.label }),
+      selectedReason?.description && /* @__PURE__ */ jsx("p", { className: "sv-report-reason-description", children: selectedReason.description }),
+      error && /* @__PURE__ */ jsx("div", { className: "sv-report-error-message", role: "alert", children: error }),
+      /* @__PURE__ */ jsxs("div", { className: "sv-report-input-section", children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: "report-description",
+            className: "sv-report-textarea",
+            value: description,
+            onChange: handleDescriptionChange,
+            placeholder: inputPlaceholder,
+            maxLength
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "sv-report-char-count", "data-over": description.length >= maxLength, children: [
+          description.length,
+          "/",
+          maxLength
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sv-report-footer sv-report-footer--single", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sv-report-button sv-report-button-submit",
+        onClick: handleSubmit,
+        children: submitText
+      }
+    ) })
+  ] });
+  const renderLoading = () => /* @__PURE__ */ jsxs("div", { className: "sv-report-loading", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-report-spinner" }),
+    /* @__PURE__ */ jsx("span", { children: loadingText })
+  ] });
+  const renderSuccess = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "sv-report-success", children: [
+      /* @__PURE__ */ jsx("div", { className: "sv-report-success-icon", children: successIcon ?? /* @__PURE__ */ jsx(CheckIcon, {}) }),
+      /* @__PURE__ */ jsx("h3", { className: "sv-report-success-title", children: successTitle }),
+      /* @__PURE__ */ jsx("p", { className: "sv-report-success-message", children: successMessage })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sv-report-footer sv-report-footer--single", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sv-report-button sv-report-button-submit",
+        onClick: handleDone,
+        children: doneText
+      }
+    ) })
+  ] });
+  const renderError = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "sv-report-header", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "sv-report-back", onClick: handleBack, "aria-label": "Back", children: /* @__PURE__ */ jsx(BackIcon, {}) }),
+      /* @__PURE__ */ jsx("h2", { className: "sv-report-title", children: title }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "sv-report-close", onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "sv-report-content sv-report-content--detail", children: [
+      /* @__PURE__ */ jsx("h3", { className: "sv-report-reason-title", children: selectedReason?.label }),
+      /* @__PURE__ */ jsx("div", { className: "sv-report-error-message", role: "alert", children: error || errorMessage }),
+      /* @__PURE__ */ jsx("p", { className: "sv-report-reason-description", children: errorDescription })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sv-report-footer sv-report-footer--single", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sv-report-button sv-report-button-submit",
+        onClick: handleSubmit,
+        children: "Try Again"
+      }
+    ) })
+  ] });
+  const renderContent = () => {
+    if (state === "loading") return renderLoading();
+    if (state === "success") return renderSuccess();
+    if (state === "error") return renderError();
+    if (step === "select") return renderSelectStep();
+    return renderDetailStep();
+  };
+  return /* @__PURE__ */ jsx(
+    BottomSheetHeadless,
+    {
+      isOpen,
+      onClose: handleClose,
+      height: "auto",
+      className: clsx("sv-report-sheet", className),
+      closeOnBackdropClick: state !== "loading",
+      closeOnEscape: state !== "loading",
+      showDragHandle: false,
+      ariaLabel: "Report content",
+      children: renderContent()
+    }
+  );
+}
+var ReportSheetHeadless = memo(ReportSheetHeadlessComponent);
+ReportSheetHeadless.displayName = "ReportSheetHeadless";
+
+export { REPORT_SHEET_CSS, ReportSheetHeadless, injectReportSheetCSS };