@wow-two-beta/ui 0.0.24 → 0.0.26

package/dist/{chunk-I4WUBNR6.js → chunk-NLUTV5BP.js}

@@ -1,8 +1,8 @@
 import { listboxVariants, listboxItemVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-FFQENBTW.js';
-import { PopoverTrigger, Popover, PopoverContent } from './chunk-DSA7L7PD.js';
+import { PopoverTrigger, Popover, PopoverContent } from './chunk-TSTJCUXX.js';
 import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-6RFXTWLM.js';
 import { tv, dataAttr } from './chunk-BMBIZLO4.js';
-import { useControlled } from './chunk-4P2TFUVW.js';
+import { useControlled } from './chunk-76ZIAFWD.js';
 import { Icon } from './chunk-TDX22OWF.js';
 import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-NC2CBGX2.js';
 import { composeRefs } from './chunk-DN7WBRIV.js';
@@ -6808,7 +6808,181 @@ function EmojiCell({ entry, cellSize, disabled, onSelect }) {
   ) });
 }
 var BUILT_IN_EMOJI = EMOJI;
+var DEFAULT_REACTIONS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F389}", "\u{1F62E}", "\u{1F622}", "\u{1F680}"];
+var SIZE4 = {
+  sm: "h-7 w-7 text-base",
+  md: "h-8 w-8 text-lg"
+};
+var ReactionPicker = forwardRef(
+  ({
+    emojis = DEFAULT_REACTIONS,
+    selected,
+    onSelect,
+    onMore,
+    hideMore,
+    size = "md",
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "toolbar",
+      "aria-label": "Reaction picker",
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full border border-border bg-popover p-1 shadow-sm",
+        className
+      ),
+      ...props,
+      children: [
+        emojis.map((emoji) => {
+          const active = selected?.includes(emoji);
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-active": active ? "" : void 0,
+              "aria-pressed": active,
+              "aria-label": `React with ${emoji}`,
+              onClick: () => onSelect?.(emoji),
+              className: cn(
+                "inline-flex items-center justify-center rounded-full leading-none transition-transform",
+                "hover:scale-125 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                active && "bg-primary-soft",
+                SIZE4[size]
+              ),
+              children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: emoji })
+            },
+            emoji
+          );
+        }),
+        !hideMore && onMore && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "More reactions",
+            onClick: onMore,
+            className: cn(
+              "inline-flex items-center justify-center rounded-full text-muted-foreground transition-colors",
+              "hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              SIZE4[size]
+            ),
+            children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  )
+);
+ReactionPicker.displayName = "ReactionPicker";
+var ChatComposer = forwardRef(
+  ({
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    onSubmit,
+    placeholder = "Write a message\u2026",
+    disabled,
+    leading,
+    trailing,
+    sendButton,
+    hideSendButton,
+    submitOn = "enter",
+    maxHeight = 200,
+    textareaProps,
+    className,
+    ...props
+  }, ref) => {
+    const [value, setValue] = useControlled({
+      controlled: valueProp,
+      default: defaultValue ?? "",
+      onChange: onValueChange
+    });
+    const textareaRef = useRef(null);
+    const composedRef = composeRefs(textareaRef, ref);
+    const resize = useCallback(() => {
+      const ta = textareaRef.current;
+      if (!ta) return;
+      ta.style.height = "auto";
+      const next = Math.min(ta.scrollHeight, maxHeight);
+      ta.style.height = `${next}px`;
+      ta.style.overflowY = ta.scrollHeight > maxHeight ? "auto" : "hidden";
+    }, [maxHeight]);
+    useEffect(() => {
+      resize();
+    }, [value, resize]);
+    const handleSubmit = (e) => {
+      e?.preventDefault();
+      const trimmed = value.trim();
+      if (!trimmed || disabled) return;
+      onSubmit?.(trimmed);
+      if (valueProp === void 0) setValue("");
+    };
+    const handleKeyDown = (e) => {
+      textareaProps?.onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      const isEnter = e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing;
+      const wantsMod = submitOn === "mod-enter";
+      const modPressed = e.metaKey || e.ctrlKey;
+      if (isEnter && (wantsMod ? modPressed : !modPressed)) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    const isEmpty = value.trim().length === 0;
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        className: cn(
+          "flex w-full items-end gap-2 rounded-2xl border border-input bg-background px-3 py-2",
+          "focus-within:ring-2 focus-within:ring-ring",
+          disabled && "cursor-not-allowed opacity-60",
+          className
+        ),
+        ...props,
+        children: [
+          leading && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1 self-end pb-1", children: leading }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ...textareaProps,
+              ref: composedRef,
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              rows: 1,
+              placeholder,
+              disabled,
+              className: cn(
+                "flex-1 resize-none bg-transparent py-1 text-sm leading-relaxed text-foreground placeholder:text-muted-foreground focus:outline-none",
+                textareaProps?.className
+              )
+            }
+          ),
+          trailing && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1 self-end pb-1", children: trailing }),
+          !hideSendButton && (sendButton ?? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: disabled || isEmpty,
+              "aria-label": "Send message",
+              className: cn(
+                "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full self-end",
+                isEmpty ? "bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90",
+                "disabled:cursor-not-allowed",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              ),
+              children: /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" })
+            }
+          ))
+        ]
+      }
+    );
+  }
+);
+ChatComposer.displayName = "ChatComposer";
 
-export { ADDRESS_COUNTRIES, AddressForm, BUILT_IN_EMOJI, BUILT_IN_FONTS, Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, CodeEditor, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CronInput, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, EmojiPicker, Fieldset, FilePicker, FileUpload, FontPicker, FormErrorMessage, FormField, FormHelperText, GradientPicker, IconPicker, InputAddon, InputGroup, JSONEditor, KeyboardShortcutPicker, Knob, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MarkdownEditor, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PHONE_COUNTRIES, PasswordInput, PasswordStrength, PercentInput, PhoneInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, RecurrenceEditor, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, Wizard, WizardFooter, WizardStep, WizardSteps, colorSwatchVariants, gradientToCss, useWizard };
-//# sourceMappingURL=chunk-I4WUBNR6.js.map
-//# sourceMappingURL=chunk-I4WUBNR6.js.map
+export { ADDRESS_COUNTRIES, AddressForm, BUILT_IN_EMOJI, BUILT_IN_FONTS, Calendar, CharacterCount, ChatComposer, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, CodeEditor, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CronInput, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, EmojiPicker, Fieldset, FilePicker, FileUpload, FontPicker, FormErrorMessage, FormField, FormHelperText, GradientPicker, IconPicker, InputAddon, InputGroup, JSONEditor, KeyboardShortcutPicker, Knob, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MarkdownEditor, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PHONE_COUNTRIES, PasswordInput, PasswordStrength, PercentInput, PhoneInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, ReactionPicker, RecurrenceEditor, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, Wizard, WizardFooter, WizardStep, WizardSteps, colorSwatchVariants, gradientToCss, useWizard };
+//# sourceMappingURL=chunk-NLUTV5BP.js.map
+//# sourceMappingURL=chunk-NLUTV5BP.js.map