@multiplatform.one/components 5.0.27 → 6.0.0

package/dist/esm/layouts/tags.native.js

@@ -0,0 +1,320 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PlusIcon, TagIcon, XIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Input, Label, ListItem, Popover, ScrollView, Text, XStack, YStack } from "tamagui";
+import { componentColors } from "../componentColors.native.js";
+function Tags(param) {
+  var {
+    tags,
+    suggestions = [],
+    label,
+    disabled = false,
+    maxTags = 0,
+    onTagClick,
+    onAdd,
+    onRemove,
+    renderEmpty,
+    renderTag,
+    enableAdd = true,
+    enableRemove = true,
+    compact = false,
+    variant = "filled",
+    theme: chipTheme,
+    labels = {},
+    placeholder = "Add tag...",
+    ...stackProps
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var inputRef = useRef(null);
+  var chipSize = compact ? knobProps.sizeToken === "$5" ? "$4" : knobProps.sizeToken === "$4" ? "$3" : "$2" : knobProps.sizeToken;
+  var [inputValue, setInputValue] = useState("");
+  var [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  var {
+    addTag: addTagLabel = "Add Tag",
+    noTags: noTagsLabel = "No tags",
+    clickToAdd: clickToAddLabel = "Click + to add tags",
+    suggestions: suggestionsLabel = "Suggestions",
+    noAvailableTags: noAvailableTagsLabel = "No available tags",
+    createTag: createTagLabel = function (value) {
+      return `Create "${value}"`;
+    }
+  } = labels;
+  var appliedTagNames = useMemo(function () {
+    return new Set(tags.map(function (t) {
+      return t.label.toLowerCase();
+    }));
+  }, [tags]);
+  var availableSuggestions = useMemo(function () {
+    var searchTerm = inputValue.toLowerCase().trim();
+    return suggestions.filter(function (tag) {
+      var tagName = tag.label.toLowerCase();
+      if (appliedTagNames.has(tagName)) return false;
+      if (searchTerm && !tagName.includes(searchTerm)) return false;
+      return true;
+    }).slice(0, 10);
+  }, [suggestions, appliedTagNames, inputValue]);
+  var canAdd = useMemo(function () {
+    if (disabled || !enableAdd || !onAdd) return false;
+    if (maxTags > 0 && tags.length >= maxTags) return false;
+    return true;
+  }, [disabled, enableAdd, onAdd, maxTags, tags.length]);
+  var handleAddTag = useCallback(function (tagName) {
+    var trimmedName = tagName.trim();
+    if (!trimmedName || !canAdd) return;
+    if (appliedTagNames.has(trimmedName.toLowerCase())) return;
+    setInputValue("");
+    setIsPopoverOpen(false);
+    onAdd === null || onAdd === void 0 ? void 0 : onAdd(trimmedName);
+  }, [canAdd, appliedTagNames, onAdd]);
+  var handleInputChange = useCallback(function (text) {
+    setInputValue(text);
+    setIsPopoverOpen(true);
+  }, []);
+  var handleKeyPress = useCallback(function (e) {
+    if (e.key === "Enter" && inputValue.trim()) {
+      e.preventDefault();
+      handleAddTag(inputValue);
+    } else if (e.key === "Escape") {
+      setIsPopoverOpen(false);
+      setInputValue("");
+    }
+  }, [inputValue, handleAddTag]);
+  var handleSelectSuggestion = useCallback(function (tagLabel) {
+    handleAddTag(tagLabel);
+  }, [handleAddTag]);
+  useEffect(function () {
+    if (isPopoverOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isPopoverOpen]);
+  var emptyState = renderEmpty ? renderEmpty() : /* @__PURE__ */_jsxs(XStack, {
+    padding: compact ? "$1" : "$2",
+    alignItems: "center",
+    opacity: 0.5,
+    gap: "$2",
+    backgroundColor: componentColors.surface.background,
+    ...knobProps.borderRadius,
+    children: [/* @__PURE__ */_jsx(TagIcon, {
+      size: compact ? 14 : 16
+    }), /* @__PURE__ */_jsx(Text, {
+      color: componentColors.text.muted,
+      fontSize: compact ? "$1" : "$2",
+      children: noTagsLabel
+    })]
+  });
+  var getVariantStyles = function getVariantStyles2(v) {
+    switch (v) {
+      case "outlined":
+        return {
+          backgroundColor: "transparent",
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          hoverStyle: {
+            backgroundColor: componentColors.interactive.background
+          },
+          pressStyle: {
+            backgroundColor: componentColors.interactive.hover
+          }
+        };
+      case "ghost":
+        return {
+          backgroundColor: "transparent",
+          hoverStyle: {
+            backgroundColor: componentColors.interactive.background
+          },
+          pressStyle: {
+            backgroundColor: componentColors.interactive.hover
+          }
+        };
+      case "filled":
+        return {
+          ...knobProps.surface,
+          hoverStyle: {
+            backgroundColor: componentColors.interactive.active
+          },
+          pressStyle: {
+            backgroundColor: componentColors.surface.border
+          }
+        };
+    }
+  };
+  var renderTagItem = function renderTagItem2(tag) {
+    var actions = {
+      onRemove: function onRemove1() {
+        return onRemove === null || onRemove === void 0 ? void 0 : onRemove(tag);
+      }
+    };
+    var variantStyles = getVariantStyles(variant);
+    var defaultContent = /* @__PURE__ */_jsx(Button, {
+      size: chipSize,
+      theme: chipTheme,
+      ...variantStyles,
+      ...knobProps.borderRadius,
+      borderRadius: "$10",
+      ...{
+        animation: "quick"
+      },
+      onPress: function onPress() {
+        return onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(tag);
+      },
+      cursor: onTagClick ? "pointer" : "default",
+      iconAfter: enableRemove && !disabled && onRemove ? /* @__PURE__ */_jsx(XStack, {
+        focusable: true,
+        hitSlop: 8,
+        padding: "$1",
+        borderRadius: "$10",
+        hoverStyle: {
+          backgroundColor: componentColors.surface.border
+        },
+        cursor: "pointer",
+        onPress: function onPress(e) {
+          e.stopPropagation();
+          actions.onRemove();
+        },
+        "aria-label": `Remove ${tag.label}`,
+        accessibilityRole: "button",
+        children: /* @__PURE__ */_jsx(XIcon, {
+          size: compact ? 12 : 14
+        })
+      }) : void 0,
+      children: tag.label
+    }, tag.id);
+    if (renderTag) {
+      return renderTag(tag, defaultContent, actions);
+    }
+    return defaultContent;
+  };
+  var renderPopoverContent = function renderPopoverContent2() {
+    return /* @__PURE__ */_jsxs(YStack, {
+      ...knobProps.panelPadding,
+      ...knobProps.gap,
+      minWidth: 200,
+      children: [/* @__PURE__ */_jsx(Input, {
+        ref: inputRef,
+        value: inputValue,
+        onChangeText: handleInputChange,
+        onKeyDown: handleKeyPress,
+        placeholder,
+        size: chipSize,
+        ...knobProps.inputSurface,
+        autoFocus: true
+      }), inputValue.trim() && !appliedTagNames.has(inputValue.toLowerCase().trim()) && /* @__PURE__ */_jsx(Button, {
+        size: chipSize,
+        onPress: function onPress() {
+          return handleAddTag(inputValue);
+        },
+        icon: /* @__PURE__ */_jsx(PlusIcon, {
+          size: 16
+        }),
+        children: createTagLabel(inputValue.trim())
+      }), availableSuggestions.length > 0 && /* @__PURE__ */_jsxs(YStack, {
+        gap: "$1",
+        children: [/* @__PURE__ */_jsx(Text, {
+          fontSize: "$1",
+          color: componentColors.text.muted,
+          paddingLeft: "$1",
+          children: suggestionsLabel
+        }), /* @__PURE__ */_jsx(ScrollView, {
+          maxHeight: 150,
+          children: /* @__PURE__ */_jsx(YStack, {
+            gap: "$1",
+            children: availableSuggestions.map(function (tag) {
+              return /* @__PURE__ */_jsx(ListItem, {
+                title: tag.label,
+                size: chipSize,
+                hoverStyle: {
+                  backgroundColor: componentColors.interactive.background
+                },
+                pressStyle: {
+                  backgroundColor: componentColors.interactive.hover
+                },
+                onPress: function onPress() {
+                  return handleSelectSuggestion(tag.label);
+                },
+                cursor: "pointer"
+              }, tag.id);
+            })
+          })
+        })]
+      }), inputValue.trim() === "" && availableSuggestions.length === 0 && /* @__PURE__ */_jsx(Text, {
+        fontSize: "$2",
+        color: componentColors.text.muted,
+        textAlign: "center",
+        padding: "$2",
+        children: noAvailableTagsLabel
+      })]
+    });
+  };
+  return /* @__PURE__ */_jsxs(YStack, {
+    ...knobProps.gap,
+    ...stackProps,
+    children: [label && /* @__PURE__ */_jsx(XStack, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: /* @__PURE__ */_jsxs(Label, {
+        fontSize: compact ? "$3" : "$4",
+        fontWeight: "500",
+        children: [label, maxTags > 0 && /* @__PURE__ */_jsxs(Text, {
+          color: componentColors.text.muted,
+          fontSize: "$2",
+          children: [" ", "(", tags.length, "/", maxTags, ")"]
+        })]
+      })
+    }), /* @__PURE__ */_jsxs(XStack, {
+      flexWrap: "wrap",
+      gap: "$2",
+      alignItems: "center",
+      children: [tags.length === 0 && !enableAdd ? emptyState : tags.map(function (tag) {
+        return /* @__PURE__ */_jsx(React.Fragment, {
+          children: renderTagItem(tag)
+        }, tag.id);
+      }), enableAdd && canAdd && /* @__PURE__ */_jsxs(Popover, {
+        open: isPopoverOpen,
+        onOpenChange: setIsPopoverOpen,
+        placement: "bottom-start",
+        children: [/* @__PURE__ */_jsx(Popover.Trigger, {
+          asChild: true,
+          children: /* @__PURE__ */_jsx(Button, {
+            size: chipSize,
+            variant: "outlined",
+            ...{
+              animation: "quick"
+            },
+            icon: /* @__PURE__ */_jsx(PlusIcon, {
+              size: compact ? 14 : 16
+            }),
+            circular: compact,
+            children: !compact && addTagLabel
+          })
+        }), /* @__PURE__ */_jsxs(Popover.Content, {
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          borderRadius: knobProps.borderRadius.borderRadius,
+          elevation: knobProps.elevation,
+          enterStyle: {
+            y: -10,
+            opacity: 0
+          },
+          exitStyle: {
+            y: -10,
+            opacity: 0
+          },
+          children: [/* @__PURE__ */_jsx(Popover.Arrow, {
+            borderWidth: 1,
+            borderColor: "$borderColor"
+          }), renderPopoverContent()]
+        })]
+      }), tags.length === 0 && enableAdd && !isPopoverOpen && /* @__PURE__ */_jsx(Text, {
+        color: componentColors.text.muted,
+        fontSize: compact ? "$1" : "$2",
+        marginLeft: "$1",
+        children: clickToAddLabel
+      })]
+    })]
+  });
+}
+export { Tags };
+//# sourceMappingURL=tags.native.js.map

package/dist/esm/layouts/tags.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","PlusIcon","TagIcon","XIcon","useResolvedKnobs","React","useCallback","useEffect","useMemo","useRef","useState","Button","Input","Label","ListItem","Popover","ScrollView","Text","XStack","YStack","componentColors","Tags","param","tags","suggestions","label","disabled","maxTags","onTagClick","onAdd","onRemove","renderEmpty","renderTag","enableAdd","enableRemove","compact","variant","theme","chipTheme","labels","placeholder","stackProps","knobProps","inputRef","chipSize","sizeToken","inputValue","setInputValue","isPopoverOpen","setIsPopoverOpen","addTag","addTagLabel","noTags","noTagsLabel","clickToAdd","clickToAddLabel","suggestionsLabel","noAvailableTags","noAvailableTagsLabel","createTag","createTagLabel","value","appliedTagNames","Set","map","t","toLowerCase","availableSuggestions","searchTerm","trim","filter","tag","tagName","has","includes","slice","canAdd","length","handleAddTag","trimmedName","handleInputChange","text","handleKeyPress","e","key","preventDefault","handleSelectSuggestion","tagLabel","current","focus","emptyState","padding","alignItems","opacity","gap","backgroundColor","surface","background","borderRadius","children","size","color","muted","fontSize","getVariantStyles","getVariantStyles2","v","borderWidth","borderColor","hoverStyle","interactive","pressStyle","hover","active","border","renderTagItem","renderTagItem2","actions","onRemove1","variantStyles","defaultContent","animation","onPress","cursor","iconAfter","focusable","hitSlop","stopPropagation","accessibilityRole","id","renderPopoverContent","renderPopoverContent2","panelPadding","minWidth","ref","onChangeText","onKeyDown","inputSurface","autoFocus","icon","paddingLeft","maxHeight","title","textAlign","justifyContent","fontWeight"],"sources":["../../../src/layouts/tags.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/layouts/timeline.mjs

@@ -0,0 +1,331 @@
+import { ClockIcon, PencilSimpleIcon, FileTextIcon, ChatCircleIcon, PaperclipIcon, PlusIcon, PaperPlaneTiltIcon, UserPlusIcon, UserIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useCallback, useState } from "react";
+import { Avatar, Button, H4, ListItem, Separator, Spinner, Text, TextArea, XStack, YStack } from "tamagui";
+import { componentColors } from "../componentColors.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getEntryIcon(entry, size) {
+  switch (entry.type) {
+    case "comment":
+      return /* @__PURE__ */jsx(ChatCircleIcon, {
+        size
+      });
+    case "version":
+      return /* @__PURE__ */jsx(PencilSimpleIcon, {
+        size
+      });
+    case "attachment":
+      return /* @__PURE__ */jsx(PaperclipIcon, {
+        size
+      });
+    case "assignment":
+      return /* @__PURE__ */jsx(UserPlusIcon, {
+        size
+      });
+    case "info":
+      return /* @__PURE__ */jsx(FileTextIcon, {
+        size
+      });
+    default:
+      return /* @__PURE__ */jsx(ClockIcon, {
+        size
+      });
+  }
+}
+function getInitials(name) {
+  const parts = name.split(/[\s@]/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[1][0]).toUpperCase();
+  }
+  return name.substring(0, 2).toUpperCase();
+}
+function defaultFormatTimestamp(timestamp) {
+  try {
+    return new Date(timestamp).toLocaleString();
+  } catch {
+    return timestamp;
+  }
+}
+function getEntrySubTitle(entry, formatTimestamp) {
+  return formatTimestamp(entry.timestamp);
+}
+function getEntryActionLabel(entry, labels) {
+  if (entry.type === "version") return labels.madeChanges;
+  if (entry.type === "attachment") return labels.addedAttachment;
+  if (entry.type === "assignment") return labels.assigned;
+  return void 0;
+}
+function Timeline({
+  entries,
+  label,
+  disabled = false,
+  enableAddComment = true,
+  onCommentAdded,
+  onEntryClick,
+  renderEmpty,
+  renderEntry,
+  formatTimestamp = defaultFormatTimestamp,
+  compact = false,
+  labels = {},
+  placeholder = "Add a comment...",
+  ...stackProps
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const [commentText, setCommentText] = useState("");
+  const [isAddingComment, setIsAddingComment] = useState(false);
+  const [showCommentInput, setShowCommentInput] = useState(false);
+  const {
+    noActivity: noActivityLabel = "No activity yet",
+    addComment: addCommentLabel = "Add Comment",
+    cancel: cancelLabel = "Cancel",
+    comment: commentLabel = "Comment",
+    sending: sendingLabel = "Sending...",
+    madeChanges: madeChangesLabel = "made changes",
+    addedAttachment: addedAttachmentLabel = "added an attachment",
+    assigned: assignedLabel = "assigned",
+    entry: entryLabel = "entry",
+    entries: entriesLabel = "entries"
+  } = labels;
+  const handleAddComment = useCallback(async () => {
+    const content = commentText.trim();
+    if (!content || isAddingComment) return;
+    setIsAddingComment(true);
+    try {
+      onCommentAdded?.(content);
+      setCommentText("");
+      setShowCommentInput(false);
+    } finally {
+      setIsAddingComment(false);
+    }
+  }, [commentText, isAddingComment, onCommentAdded]);
+  const handleKeyPress = useCallback(e => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleAddComment();
+    } else if (e.key === "Escape") {
+      setShowCommentInput(false);
+      setCommentText("");
+    }
+  }, [handleAddComment]);
+  const sz = knobProps.sizeToken;
+  const emptyIconSize = compact ? sz === "$3" ? 20 : sz === "$5" ? 28 : 24 : sz === "$3" ? 32 : sz === "$5" ? 48 : 40;
+  const emptyState = renderEmpty ? renderEmpty() : /* @__PURE__ */jsxs(YStack, {
+    ...(compact ? {
+      padding: "$3"
+    } : knobProps.panelPadding),
+    alignItems: "center",
+    opacity: 0.5,
+    children: [/* @__PURE__ */jsx(ClockIcon, {
+      size: emptyIconSize
+    }), /* @__PURE__ */jsx(Text, {
+      color: componentColors.text.muted,
+      fontSize: compact ? "$2" : sz,
+      marginTop: "$2",
+      children: noActivityLabel
+    })]
+  });
+  const renderVersionChanges = changes => /* @__PURE__ */jsxs(YStack, {
+    gap: "$1",
+    marginTop: "$1",
+    children: [changes.slice(0, 5).map(change => /* @__PURE__ */jsxs(XStack, {
+      gap: "$2",
+      flexWrap: "wrap",
+      children: [/* @__PURE__ */jsxs(Text, {
+        fontSize: "$1",
+        color: componentColors.text.muted,
+        fontWeight: "500",
+        children: [change.fieldLabel || change.field, ":"]
+      }), change.old !== void 0 && /* @__PURE__ */jsx(Text, {
+        fontSize: "$1",
+        color: componentColors.semantic.error,
+        textDecorationLine: "line-through",
+        children: String(change.old || "(empty)")
+      }), change.old !== void 0 && change.new !== void 0 && /* @__PURE__ */jsx(Text, {
+        fontSize: "$1",
+        color: componentColors.text.muted,
+        children: "\u2192"
+      }), change.new !== void 0 && /* @__PURE__ */jsx(Text, {
+        fontSize: "$1",
+        color: componentColors.semantic.success,
+        children: String(change.new || "(empty)")
+      })]
+    }, change.field)), changes.length > 5 && /* @__PURE__ */jsxs(Text, {
+      fontSize: "$1",
+      color: componentColors.text.muted,
+      fontStyle: "italic",
+      children: ["+", changes.length - 5, " more changes"]
+    })]
+  });
+  const renderTimelineEntry = entry => {
+    const sz2 = knobProps.sizeToken;
+    const iconSize = compact ? 14 : sz2 === "$3" ? 14 : sz2 === "$5" ? 18 : 16;
+    const containerSize = compact ? sz2 === "$3" ? 20 : sz2 === "$5" ? 28 : 24 : sz2 === "$3" ? 24 : sz2 === "$5" ? 40 : 32;
+    const entryIcon = entry.type === "comment" ? /* @__PURE__ */jsx(Avatar, {
+      circular: true,
+      size: compact ? "$1.5" : "$2",
+      backgroundColor: componentColors.interactive.hover,
+      children: /* @__PURE__ */jsx(Avatar.Fallback, {
+        backgroundColor: componentColors.interactive.hover,
+        children: /* @__PURE__ */jsx(Text, {
+          fontSize: "$1",
+          color: "$accentColor",
+          fontWeight: "600",
+          children: getInitials(entry.author)
+        })
+      })
+    }) : /* @__PURE__ */jsx(YStack, {
+      width: containerSize,
+      height: containerSize,
+      borderRadius: "$10",
+      backgroundColor: entry.type === "version" ? "$orange4" : componentColors.surface.background,
+      alignItems: "center",
+      justifyContent: "center",
+      children: getEntryIcon(entry, iconSize)
+    });
+    const subTitle = getEntrySubTitle(entry, formatTimestamp);
+    const actionLabel = getEntryActionLabel(entry, {
+      madeChanges: madeChangesLabel,
+      addedAttachment: addedAttachmentLabel,
+      assigned: assignedLabel
+    });
+    const defaultContent = /* @__PURE__ */jsxs(ListItem, {
+      title: entry.author,
+      subTitle,
+      icon: entryIcon,
+      size: compact ? "$3" : knobProps.sizeToken,
+      hoverStyle: {
+        backgroundColor: componentColors.surface.background
+      },
+      pressStyle: {
+        backgroundColor: componentColors.interactive.background
+      },
+      onPress: () => onEntryClick?.(entry),
+      cursor: onEntryClick ? "pointer" : "default",
+      children: [actionLabel && /* @__PURE__ */jsx(Text, {
+        fontSize: compact ? "$1" : "$2",
+        color: componentColors.text.muted,
+        marginTop: "$1",
+        children: actionLabel
+      }), entry.content && entry.type === "comment" && /* @__PURE__ */jsx(Text, {
+        fontSize: compact ? "$2" : knobProps.sizeToken,
+        color: componentColors.text.muted,
+        marginTop: "$1",
+        whiteSpace: "pre-wrap",
+        children: entry.content
+      }), entry.content && entry.type === "info" && /* @__PURE__ */jsx(Text, {
+        fontSize: compact ? "$1" : "$2",
+        color: componentColors.text.muted,
+        fontStyle: "italic",
+        children: entry.content
+      }), entry.type === "version" && entry.changes && entry.changes.length > 0 && renderVersionChanges(entry.changes)]
+    }, entry.id);
+    if (renderEntry) {
+      return renderEntry(entry, defaultContent);
+    }
+    return defaultContent;
+  };
+  const renderCommentInput = () => {
+    if (!enableAddComment || disabled || !onCommentAdded) return null;
+    if (!showCommentInput) {
+      return /* @__PURE__ */jsx(Button, {
+        size: compact ? "$3" : "$4",
+        variant: "outlined",
+        icon: /* @__PURE__ */jsx(PlusIcon, {
+          size: compact ? 14 : 16
+        }),
+        onPress: () => setShowCommentInput(true),
+        alignSelf: "flex-start",
+        children: addCommentLabel
+      });
+    }
+    return /* @__PURE__ */jsx(YStack, {
+      ...knobProps.gap,
+      ...(compact ? {
+        padding: "$2"
+      } : knobProps.panelPadding),
+      ...{
+        backgroundColor: componentColors.surface.background
+      },
+      ...knobProps.borderRadius,
+      borderColor: "$borderColor",
+      children: /* @__PURE__ */jsxs(XStack, {
+        ...knobProps.gap,
+        alignItems: "flex-start",
+        children: [/* @__PURE__ */jsx(Avatar, {
+          circular: true,
+          size: compact ? "$1.5" : "$2",
+          backgroundColor: componentColors.interactive.hover,
+          children: /* @__PURE__ */jsx(Avatar.Fallback, {
+            backgroundColor: componentColors.interactive.hover,
+            children: /* @__PURE__ */jsx(UserIcon, {
+              size: compact ? 12 : 14
+            })
+          })
+        }), /* @__PURE__ */jsxs(YStack, {
+          flex: 1,
+          ...knobProps.gap,
+          children: [/* @__PURE__ */jsx(TextArea, {
+            value: commentText,
+            onChangeText: setCommentText,
+            placeholder,
+            size: compact ? "$2" : "$3",
+            minHeight: compact ? 60 : 80,
+            autoFocus: true,
+            onKeyDown: handleKeyPress
+          }), /* @__PURE__ */jsxs(XStack, {
+            ...knobProps.gap,
+            justifyContent: "flex-end",
+            children: [/* @__PURE__ */jsx(Button, {
+              size: compact ? "$2" : "$3",
+              variant: "outlined",
+              onPress: () => {
+                setShowCommentInput(false);
+                setCommentText("");
+              },
+              disabled: isAddingComment,
+              children: cancelLabel
+            }), /* @__PURE__ */jsx(Button, {
+              size: compact ? "$2" : "$3",
+              icon: isAddingComment ? /* @__PURE__ */jsx(Spinner, {
+                size: "small"
+              }) : /* @__PURE__ */jsx(PaperPlaneTiltIcon, {
+                size: 14
+              }),
+              onPress: handleAddComment,
+              disabled: !commentText.trim() || isAddingComment,
+              children: isAddingComment ? sendingLabel : commentLabel
+            })]
+          })]
+        })]
+      })
+    });
+  };
+  return /* @__PURE__ */jsxs(YStack, {
+    ...knobProps.gap,
+    ...stackProps,
+    children: [label && /* @__PURE__ */jsxs(XStack, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: [/* @__PURE__ */jsx(H4, {
+        fontSize: compact ? "$4" : "$5",
+        fontWeight: "600",
+        children: label
+      }), entries.length > 0 && /* @__PURE__ */jsxs(Text, {
+        fontSize: "$2",
+        color: componentColors.text.muted,
+        children: [entries.length, " ", entries.length === 1 ? entryLabel : entriesLabel]
+      })]
+    }), renderCommentInput(), enableAddComment && !disabled && onCommentAdded && entries.length > 0 && /* @__PURE__ */jsx(Separator, {
+      marginVertical: "$2"
+    }), entries.length === 0 ? emptyState : /* @__PURE__ */jsx(YStack, {
+      gap: "$1",
+      children: entries.map(entry => /* @__PURE__ */jsx(React.Fragment, {
+        children: renderTimelineEntry(entry)
+      }, entry.id))
+    })]
+  });
+}
+export { Timeline };
+//# sourceMappingURL=timeline.mjs.map