@refraction-ui/react 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,4 +1,5 @@
 import * as React41 from 'react';
+import { forwardRef, useRef, useState, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
@@ -106,7 +107,6 @@ __export(index_exports, {
   Command: () => Command,
   CommandEmpty: () => CommandEmpty,
   CommandGroup: () => CommandGroup,
-  CommandInput: () => CommandInput,
   CommandItem: () => CommandItem,
   CommandList: () => CommandList,
   CommandSeparator: () => CommandSeparator,
@@ -12300,6 +12300,196 @@ var PaymentButton = React41.forwardRef(
 );
 PaymentButton.displayName = "PaymentButton";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AnimatedText, AppShell, AuthGuard, AuthProvider, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, BadgeDisplay, BottomNav, Breadcrumbs, Button, CATEGORY_LABELS, Calendar, CalendarHeader, Callout, Card2 as Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselTrigger, Checkbox, CodeBlock, CodeEditor, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, ContentProtection, DataTable, DatePicker, DeviceFrame, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DiffViewer, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EMOJI_CATEGORIES, EMOJI_DATA, EmojiPicker, FeedbackButton, FeedbackDialog, FileUpload, Footer, InlineEditor, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InstallPrompt, KeyboardShortcut, LanguageSelector, LinkCard, MarkdownRenderer, MobileNav, MobileNavContent, MobileNavLink, MobileNavTrigger, Navbar, OtpInput, STATUS_COLORS as PRESENCE_STATUS_COLORS, STATUS_LABELS as PRESENCE_STATUS_LABELS, Pagination, Payment, Popover, PopoverClose, PopoverContent, PopoverTrigger, PresenceIndicator, ProgressBar, RadioGroup, RadioItem, ReactionBar, ResizableDivider, ResizableLayout, ResizablePane, STATUS_COLORS2 as STATUS_COLORS, STATUS_LABELS2 as STATUS_LABELS, SearchBar, SearchResultItem, SearchResults, Select, SelectContent, SelectItem, SelectTrigger, ShortcutBadge, Sidebar, Skeleton, SkeletonText, SkipToContent, SlideViewer, StatsGrid, StatusIndicator, Steps, Switch, TableOfContents, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeScript, ThemeToggle, ThreadView, Toast, ToastProvider, Toaster, Tooltip, TooltipContent, TooltipTrigger, TypewriterText, VersionSelector, VideoPlayer, animatedTextVariants, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, badgeGridVariants, badgeItemVariants, badgeVariants, bottomNavTabVariants, bottomNavVariants, breadcrumbItemVariants, breadcrumbSeparatorStyles, breadcrumbsVariants, buttonTokens, buttonVariants, calendarVariants, canAccessAdmin, canAccessReviewer, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, cellVariants, checkIconPath, checkboxTokens, checkboxVariants, codeEditorTokens, codeEditorVariants, collapsibleContentVariants, commandGroupVariants, commandInputVariants, commandItemVariants, commandVariants, contentProtectionVariants, controlsVariants, createDiffViewer, dayVariants, deviceFrameVariants, dialogContentVariants, diffViewerTokens, diffViewerVariants, editorVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, feedbackDialogVariants, fileUploadDropZoneVariants, fileUploadFileItemStyles, fileUploadFileListStyles, footerVariants, formatFileSize, formatRelativeTime, formatShortcut, formatTimestamp, getAssignableRoles, getDefaultPortal, getInitials, hasAllRoles, hasAnyRole, hasRole, headerVariants, indeterminateIconPath, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupTokens, inputGroupVariants, inputVariants, installPromptVariants, latestBadgeVariants, markdownRendererTokens, menuContentVariants, menuItemVariants, mobileNavContentVariants, mobileNavLinkVariants, mobileNavTokens, mobileNavTriggerVariants, mobileNavVariants, navLinkVariants, navbarVariants, optionVariants, otpInputContainerVariants, otpInputSlotVariants, otpInputTokens, overlayStyles, overlayVariants, playerVariants, popoverContentVariants, previewVariants, progressBarVariants, proseVariants, radioCircleVariants, radioGroupVariants, radioItemVariants, reactionAddButtonStyles, reactionBarStyles, reactionCountStyles, reactionEmojiStyles, reactionPillVariants, resizableDividerVariants, resizableLayoutTokens, resizableLayoutVariants, resizablePaneVariants, rowVariants, searchBarVariants, searchResultVariants, selectContentVariants, selectItemVariants, selectTokens, selectTriggerVariants, selectorVariants, shortcutBadgeStyles, shortcutKeyStyles, shortcutSeparatorStyles, skeletonVariants, slideTypeBadgeVariants, progressBarVariants2 as slideViewerProgressBarVariants, slideViewerTokens, slideViewerVariants, statCardVariants, statsGridVariants, statusBarVariants, statusContainerStyles, statusDotVariants, statusLabelStyles, statusPulseVariants, switchThumbVariants, switchTokens, switchVariants, tabBarVariants, tabVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, threadAuthorStyles, threadAvatarStyles, threadBodyStyles, threadContainerStyles, threadContentStyles, threadMessageStyles, threadReactionsStyles, threadTimestampStyles, toastVariants, toolbarVariants, tooltipContentVariants, typewriterVariants, useAuth, useTheme, useToast, optionVariants2 as versionSelectorOptionVariants, versionSelectorVariants, watermarkVariants };
+// ../command-input/dist/index.js
+var CommandInput2 = class {
+  state = {
+    nodes: [],
+    rawText: "",
+    cursorPosition: 0,
+    activeTrigger: null,
+    activeCommandText: null
+  };
+  options;
+  constructor(options) {
+    this.options = { ...options };
+  }
+  handleInput(text, cursorPosition) {
+    this.state.rawText = text;
+    this.state.cursorPosition = cursorPosition;
+    this.parseInput();
+    this.notifyStateChange();
+  }
+  handleKeyDown(key, event) {
+    if (this.state.activeTrigger) {
+      if (key === "Escape") {
+        if (event) event.preventDefault();
+        this.state.activeTrigger = null;
+        this.state.activeCommandText = null;
+        if (this.options.onCommandCancel) {
+          this.options.onCommandCancel();
+        }
+        this.notifyStateChange();
+      } else if (key === "Enter") {
+        if (event) event.preventDefault();
+        const trigger = this.state.activeTrigger;
+        const text = this.state.activeCommandText || "";
+        this.state.activeTrigger = null;
+        this.state.activeCommandText = null;
+        if (this.options.onCommandCommit) {
+          this.options.onCommandCommit(trigger, text);
+        }
+        this.notifyStateChange();
+      }
+    }
+  }
+  get value() {
+    return this.state.nodes;
+  }
+  getState() {
+    return { ...this.state };
+  }
+  parseInput() {
+    const { rawText, cursorPosition } = this.state;
+    this.state.activeTrigger = null;
+    this.state.activeCommandText = null;
+    for (let i = cursorPosition - 1; i >= 0; i--) {
+      const char = rawText[i];
+      const matchedTrigger = this.options.triggers.find((t) => t.char === char);
+      if (matchedTrigger) {
+        const isStartOfWord = i === 0 || /\\s/.test(rawText[i - 1]);
+        if (isStartOfWord) {
+          const commandText = rawText.slice(i + 1, cursorPosition);
+          if (!/\\s/.test(commandText)) {
+            let isValid = true;
+            if (matchedTrigger.pattern) {
+              isValid = matchedTrigger.pattern.test(commandText);
+            }
+            if (isValid) {
+              this.state.activeTrigger = matchedTrigger;
+              this.state.activeCommandText = commandText;
+              if (this.options.onCommandTriggered) {
+                this.options.onCommandTriggered(matchedTrigger, commandText);
+              }
+            }
+          }
+        }
+        break;
+      }
+      if (/\\s/.test(char)) {
+        break;
+      }
+    }
+    const nodes = [];
+    if (this.options.triggers.length === 0) {
+      nodes.push({ type: "text", text: rawText });
+      this.state.nodes = nodes;
+      return;
+    }
+    const triggerChars = this.options.triggers.map((t) => t.char.replace(/[.*+?^\${}()|[\\]\\\\]/g, "\\\\$&"));
+    const patternStr = `(^|\\\\s)(${triggerChars.join("|")})([^\\\\s]*)`;
+    const regex = new RegExp(patternStr, "g");
+    let currentIndex = 0;
+    let match;
+    while ((match = regex.exec(rawText)) !== null) {
+      const precedingWhitespace = match[1];
+      const triggerChar = match[2];
+      const commandText = match[3];
+      const matchStart = match.index;
+      const triggerStart = matchStart + precedingWhitespace.length;
+      const triggerConfig = this.options.triggers.find((t) => t.char === triggerChar);
+      let isValid = true;
+      if (triggerConfig?.pattern && commandText.length > 0) {
+        isValid = triggerConfig.pattern.test(commandText);
+      }
+      if (isValid) {
+        if (triggerStart > currentIndex) {
+          nodes.push({ type: "text", text: rawText.slice(currentIndex, triggerStart) });
+        }
+        nodes.push({ type: "command", trigger: triggerChar, text: commandText });
+        currentIndex = regex.lastIndex;
+      }
+    }
+    if (currentIndex < rawText.length) {
+      nodes.push({ type: "text", text: rawText.slice(currentIndex) });
+    }
+    this.state.nodes = nodes;
+  }
+  notifyStateChange() {
+    if (this.options.onStateChange) {
+      this.options.onStateChange({ ...this.state });
+    }
+  }
+};
+var CommandInput3 = forwardRef(
+  ({
+    value = "",
+    onChange,
+    triggers = [],
+    renderPopover,
+    className,
+    ...props
+  }, ref) => {
+    const localRef = useRef(null);
+    const containerRef = ref || localRef;
+    const [popoverState, setPopoverState] = useState({
+      isOpen: false,
+      trigger: "",
+      search: "",
+      position: { top: 0, left: 0 }
+    });
+    const coreRef = useRef(null);
+    useEffect(() => {
+      if (containerRef.current && !coreRef.current) {
+        coreRef.current = new CommandInput2({
+          triggers,
+          onCommandTriggered: (trigger, search) => {
+            setPopoverState({
+              isOpen: true,
+              trigger: trigger.char,
+              search,
+              position: { top: 0, left: 0 }
+            });
+          },
+          onCommandCancel: () => {
+            setPopoverState((prev) => ({ ...prev, isOpen: false }));
+          },
+          onStateChange: (state) => {
+            onChange?.(state.rawText);
+          }
+        });
+      }
+    }, [triggers, onChange]);
+    useEffect(() => {
+      if (containerRef.current && containerRef.current.innerHTML !== value && coreRef.current) {
+        containerRef.current.innerHTML = value;
+      }
+    }, [value]);
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          className: "w-full min-h-[40px] p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
+          onInput: (e) => {
+            coreRef.current?.handleInput(e.currentTarget.textContent || "", 0);
+          },
+          onKeyDown: (e) => {
+            coreRef.current?.handleKeyDown(e.key, e);
+          },
+          ...props
+        }
+      ),
+      renderPopover && renderPopover({
+        ...popoverState,
+        close: () => setPopoverState((prev) => ({ ...prev, isOpen: false }))
+      })
+    ] });
+  }
+);
+CommandInput3.displayName = "CommandInput";
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AnimatedText, AppShell, AuthGuard, AuthProvider, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, BadgeDisplay, BottomNav, Breadcrumbs, Button, CATEGORY_LABELS, Calendar, CalendarHeader, Callout, Card2 as Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselTrigger, Checkbox, CodeBlock, CodeEditor, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandEmpty, CommandGroup, CommandItem, CommandList, CommandSeparator, ContentProtection, DataTable, DatePicker, DeviceFrame, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DiffViewer, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EMOJI_CATEGORIES, EMOJI_DATA, EmojiPicker, FeedbackButton, FeedbackDialog, FileUpload, Footer, InlineEditor, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InstallPrompt, KeyboardShortcut, LanguageSelector, LinkCard, MarkdownRenderer, MobileNav, MobileNavContent, MobileNavLink, MobileNavTrigger, Navbar, OtpInput, STATUS_COLORS as PRESENCE_STATUS_COLORS, STATUS_LABELS as PRESENCE_STATUS_LABELS, Pagination, Payment, Popover, PopoverClose, PopoverContent, PopoverTrigger, PresenceIndicator, ProgressBar, RadioGroup, RadioItem, ReactionBar, ResizableDivider, ResizableLayout, ResizablePane, STATUS_COLORS2 as STATUS_COLORS, STATUS_LABELS2 as STATUS_LABELS, SearchBar, SearchResultItem, SearchResults, Select, SelectContent, SelectItem, SelectTrigger, ShortcutBadge, Sidebar, Skeleton, SkeletonText, SkipToContent, SlideViewer, StatsGrid, StatusIndicator, Steps, Switch, TableOfContents, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeScript, ThemeToggle, ThreadView, Toast, ToastProvider, Toaster, Tooltip, TooltipContent, TooltipTrigger, TypewriterText, VersionSelector, VideoPlayer, animatedTextVariants, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, badgeGridVariants, badgeItemVariants, badgeVariants, bottomNavTabVariants, bottomNavVariants, breadcrumbItemVariants, breadcrumbSeparatorStyles, breadcrumbsVariants, buttonTokens, buttonVariants, calendarVariants, canAccessAdmin, canAccessReviewer, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, cellVariants, checkIconPath, checkboxTokens, checkboxVariants, codeEditorTokens, codeEditorVariants, collapsibleContentVariants, commandGroupVariants, commandInputVariants, commandItemVariants, commandVariants, contentProtectionVariants, controlsVariants, createDiffViewer, dayVariants, deviceFrameVariants, dialogContentVariants, diffViewerTokens, diffViewerVariants, editorVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, feedbackDialogVariants, fileUploadDropZoneVariants, fileUploadFileItemStyles, fileUploadFileListStyles, footerVariants, formatFileSize, formatRelativeTime, formatShortcut, formatTimestamp, getAssignableRoles, getDefaultPortal, getInitials, hasAllRoles, hasAnyRole, hasRole, headerVariants, indeterminateIconPath, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupTokens, inputGroupVariants, inputVariants, installPromptVariants, latestBadgeVariants, markdownRendererTokens, menuContentVariants, menuItemVariants, mobileNavContentVariants, mobileNavLinkVariants, mobileNavTokens, mobileNavTriggerVariants, mobileNavVariants, navLinkVariants, navbarVariants, optionVariants, otpInputContainerVariants, otpInputSlotVariants, otpInputTokens, overlayStyles, overlayVariants, playerVariants, popoverContentVariants, previewVariants, progressBarVariants, proseVariants, radioCircleVariants, radioGroupVariants, radioItemVariants, reactionAddButtonStyles, reactionBarStyles, reactionCountStyles, reactionEmojiStyles, reactionPillVariants, resizableDividerVariants, resizableLayoutTokens, resizableLayoutVariants, resizablePaneVariants, rowVariants, searchBarVariants, searchResultVariants, selectContentVariants, selectItemVariants, selectTokens, selectTriggerVariants, selectorVariants, shortcutBadgeStyles, shortcutKeyStyles, shortcutSeparatorStyles, skeletonVariants, slideTypeBadgeVariants, progressBarVariants2 as slideViewerProgressBarVariants, slideViewerTokens, slideViewerVariants, statCardVariants, statsGridVariants, statusBarVariants, statusContainerStyles, statusDotVariants, statusLabelStyles, statusPulseVariants, switchThumbVariants, switchTokens, switchVariants, tabBarVariants, tabVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, threadAuthorStyles, threadAvatarStyles, threadBodyStyles, threadContainerStyles, threadContentStyles, threadMessageStyles, threadReactionsStyles, threadTimestampStyles, toastVariants, toolbarVariants, tooltipContentVariants, typewriterVariants, useAuth, useTheme, useToast, optionVariants2 as versionSelectorOptionVariants, versionSelectorVariants, watermarkVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map