@agentiffai/design 1.4.9 → 1.5.1

package/dist/index.cjs

@@ -9284,6 +9284,39 @@ function WhatsAppIcon({
   );
 }
 WhatsAppIcon.displayName = "WhatsAppIcon";
+var COLORS = {
+  colored: { bg: "#F22F46", dot: "#FFFFFF" },
+  black: { bg: "#111111", dot: "#FFFFFF" },
+  white: { bg: "#FFFFFF", dot: "#111111" }
+};
+function TwilioIcon({
+  size = 24,
+  variant = "colored",
+  "aria-label": ariaLabel = "Twilio",
+  ...props
+}) {
+  const colors = COLORS[variant];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      role: props["aria-hidden"] ? void 0 : "img",
+      "aria-label": props["aria-hidden"] ? void 0 : ariaLabel,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "11", fill: colors.bg }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.25", cy: "8.25", r: "2.1", fill: colors.dot }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15.75", cy: "8.25", r: "2.1", fill: colors.dot }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.25", cy: "15.75", r: "2.1", fill: colors.dot }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15.75", cy: "15.75", r: "2.1", fill: colors.dot })
+      ]
+    }
+  );
+}
+TwilioIcon.displayName = "TwilioIcon";
 var StyledXIcon = styled58__default.default.svg`
   display: inline-block;
   vertical-align: middle;
@@ -9911,13 +9944,17 @@ var PostPreviewCard = ({
   isEditing = false,
   editContent,
   onContentChange,
+  editHashtags,
+  onHashtagsChange,
   isLoading = false,
   onImageChange
 }) => {
   const platformConfig = PLATFORM_CONFIGS[post.platform] || PLATFORM_CONFIGS.x;
   const [imageError, setImageError] = React4.useState(false);
+  const [newHashtag, setNewHashtag] = React4.useState("");
   const showSkeleton = isLoading && !post.content;
   const displayContent = isEditing && editContent !== void 0 ? editContent : post.editedContent || post.content;
+  const displayHashtags = isEditing && editHashtags !== void 0 ? editHashtags : post.hashtags;
   const currentCharCount = displayContent.length;
   const charPercentage = React4.useMemo(
     () => getCharacterLimitPercentage(post.platform, currentCharCount),
@@ -9931,6 +9968,32 @@ var PostPreviewCard = ({
   const handleContentChange = (e) => {
     onContentChange?.(e.target.value);
   };
+  const normalizeHashtag = (value) => value.trim().replace(/^#+/, "").replace(/[^\p{L}\p{N}_]/gu, "");
+  const handleRemoveHashtag = (hashtagToRemove) => {
+    const normalizedToRemove = normalizeHashtag(hashtagToRemove).toLowerCase();
+    onHashtagsChange?.(
+      displayHashtags.filter(
+        (hashtag) => normalizeHashtag(hashtag).toLowerCase() !== normalizedToRemove
+      )
+    );
+  };
+  const handleAddHashtag = () => {
+    const normalized = normalizeHashtag(newHashtag);
+    if (!normalized) return;
+    const exists = displayHashtags.some(
+      (hashtag) => normalizeHashtag(hashtag).toLowerCase() === normalized.toLowerCase()
+    );
+    if (!exists) {
+      onHashtagsChange?.([...displayHashtags, normalized]);
+    }
+    setNewHashtag("");
+  };
+  const handleNewHashtagKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleAddHashtag();
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     CardContainer,
     {
@@ -9960,10 +10023,45 @@ var PostPreviewCard = ({
               autoFocus: true
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(PostContent, { children: displayContent }),
-          !showSkeleton && post.hashtags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HashtagsContainer, { children: post.hashtags.map((hashtag) => /* @__PURE__ */ jsxRuntime.jsxs(HashtagPill, { $platformColor: platformConfig.color, children: [
-            "#",
-            hashtag.replace(/^#/, "")
-          ] }, hashtag)) })
+          !showSkeleton && (displayHashtags.length > 0 || isEditing) && /* @__PURE__ */ jsxRuntime.jsxs(HashtagsContainer, { children: [
+            displayHashtags.map((hashtag) => /* @__PURE__ */ jsxRuntime.jsxs(HashtagPill, { $platformColor: platformConfig.color, children: [
+              "#",
+              hashtag.replace(/^#/, ""),
+              isEditing && onHashtagsChange && /* @__PURE__ */ jsxRuntime.jsx(
+                RemoveHashtagButton,
+                {
+                  type: "button",
+                  onClick: () => handleRemoveHashtag(hashtag),
+                  "aria-label": `Remove #${hashtag.replace(/^#/, "")}`,
+                  children: "\xD7"
+                }
+              )
+            ] }, hashtag)),
+            isEditing && onHashtagsChange && /* @__PURE__ */ jsxRuntime.jsxs(HashtagEditor, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(HashtagInputWrapper, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(HashPrefix, { children: "#" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  HashtagInput,
+                  {
+                    value: newHashtag,
+                    onChange: (e) => setNewHashtag(e.target.value),
+                    onKeyDown: handleNewHashtagKeyDown,
+                    placeholder: "Add hashtag",
+                    "aria-label": "Add hashtag"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AddHashtagButton,
+                {
+                  type: "button",
+                  onClick: handleAddHashtag,
+                  disabled: !normalizeHashtag(newHashtag),
+                  children: "Add"
+                }
+              )
+            ] })
+          ] })
         ] }),
         post.imageUrl && !imageError ? onImageChange ? /* @__PURE__ */ jsxRuntime.jsx(ImageChangeButton, { type: "button", onClick: onImageChange, "aria-label": "Change image", children: /* @__PURE__ */ jsxRuntime.jsxs(ImagePreviewContainer, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -10178,7 +10276,9 @@ var HashtagsContainer = styled58__default.default.div`
   gap: 6px;
 `;
 var HashtagPill = styled58__default.default.span`
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   padding: ${tokens.spacing.xs} 10px;
   border-radius: ${tokens.borderRadius.full};
   font-size: ${tokens.typography.fontSize.xs};
@@ -10194,6 +10294,99 @@ var HashtagPill = styled58__default.default.span`
     color: ${tokens.colors.primary};
   }
 `;
+var RemoveHashtagButton = styled58__default.default.button`
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: ${tokens.borderRadius.full};
+  background: ${tokens.colors.background.light};
+  color: ${tokens.colors.text.secondary};
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  transition: all ${tokens.transitions.fast};
+
+  &:hover,
+  &:focus-visible {
+    background: ${tokens.colors.error};
+    color: ${tokens.colors.text.primary};
+    outline: none;
+  }
+`;
+var HashtagEditor = styled58__default.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  min-width: min(100%, 190px);
+`;
+var HashtagInputWrapper = styled58__default.default.div`
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  padding: 0 ${tokens.spacing.sm};
+  border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.full};
+  background: ${tokens.colors.background.darker};
+  transition: border-color ${tokens.transitions.fast}, box-shadow ${tokens.transitions.fast};
+
+  &:focus-within {
+    border-color: ${tokens.colors.border.focus};
+    box-shadow: 0 0 0 2px ${tokens.colors.primary}20;
+  }
+`;
+var HashPrefix = styled58__default.default.span`
+  color: ${tokens.colors.text.tertiary};
+  font-size: ${tokens.typography.fontSize.xs};
+`;
+var HashtagInput = styled58__default.default.input`
+  width: 100%;
+  min-width: 0;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: ${tokens.colors.text.primary};
+  font-size: ${tokens.typography.fontSize.xs};
+  font-family: ${tokens.typography.fontFamily.primary};
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: ${tokens.colors.text.tertiary};
+  }
+`;
+var AddHashtagButton = styled58__default.default.button`
+  height: 28px;
+  padding: 0 ${tokens.spacing.sm};
+  border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.full};
+  background: ${tokens.colors.background.light};
+  color: ${tokens.colors.text.primary};
+  cursor: pointer;
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  transition: all ${tokens.transitions.fast};
+
+  &:hover:not(:disabled),
+  &:focus-visible:not(:disabled) {
+    background: ${tokens.colors.primary};
+    border-color: ${tokens.colors.primary};
+    color: ${tokens.colors.background.dark};
+    outline: none;
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+`;
 var ProgressBarContainer2 = styled58__default.default.div`
   margin-top: ${tokens.spacing.sm};
 `;
@@ -10339,6 +10532,8 @@ var PlatformCarousel = ({
   editingIndex,
   editContent,
   onEditContentChange,
+  editHashtags,
+  onEditHashtagsChange,
   isLoading = false,
   onImageChangeRequest
 }) => {
@@ -10400,6 +10595,8 @@ var PlatformCarousel = ({
           isEditing,
           editContent: isEditing ? editContent : void 0,
           onContentChange: isEditing ? onEditContentChange : void 0,
+          editHashtags: isEditing ? editHashtags : void 0,
+          onHashtagsChange: isEditing ? onEditHashtagsChange : void 0,
           isLoading,
           onImageChange: onImageChangeRequest ? () => onImageChangeRequest(index) : void 0
         }
@@ -10530,6 +10727,8 @@ var PlatformGrid = ({
   editingIndex,
   editContent,
   onEditContentChange,
+  editHashtags,
+  onEditHashtagsChange,
   isLoading = false,
   activeIndex = 0,
   onActiveChange,
@@ -10570,6 +10769,8 @@ var PlatformGrid = ({
             isEditing,
             editContent: isEditing ? editContent : void 0,
             onContentChange: isEditing ? onEditContentChange : void 0,
+            editHashtags: isEditing ? editHashtags : void 0,
+            onHashtagsChange: isEditing ? onEditHashtagsChange : void 0,
             isLoading,
             onImageChange: onImageChangeRequest ? () => onImageChangeRequest(index) : void 0
           }
@@ -10764,6 +10965,8 @@ var SocialMediaCanvas = ({
   editingIndex,
   editContent,
   onEditContentChange,
+  editHashtags,
+  onEditHashtagsChange,
   isLoading = false,
   activeIndex = 0,
   onImageChangeRequest
@@ -10823,6 +11026,8 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
+        editHashtags,
+        onEditHashtagsChange,
         isLoading,
         onImageChangeRequest
       }
@@ -10833,6 +11038,8 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
+        editHashtags,
+        onEditHashtagsChange,
         isLoading,
         activeIndex,
         onActiveChange: handleActiveChange,
@@ -13768,6 +13975,7 @@ exports.TagInput = TagInput;
 exports.TelegramIcon = TelegramIcon;
 exports.TokenUsageCard = TokenUsageCard;
 exports.TrialPlanCard = TrialPlanCard;
+exports.TwilioIcon = TwilioIcon;
 exports.UserMessage = UserMessage;
 exports.WhatsAppIcon = WhatsAppIcon;
 exports.Window = Window;