@agentiffai/design 0.1.11 → 0.1.12

package/dist/icons/index.d.ts

@@ -146,6 +146,24 @@ declare namespace LinkedInIcon {
     var displayName: string;
 }
 
+type PostizIconVariant = 'colored' | 'black' | 'white';
+interface PostizIconProps extends Partial<AriaButtonProps> {
+    variant?: PostizIconVariant;
+    size?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    'aria-label'?: string;
+}
+
+/**
+ * Postiz logo - Official Postiz social media scheduling platform logo
+ * Brand colors: Purple (#612bd3), Dark (#131019), White (#fff)
+ */
+declare function PostizIcon({ variant, size, className, style, 'aria-label': ariaLabel, onPress, ...ariaProps }: PostizIconProps): react_jsx_runtime.JSX.Element;
+declare namespace PostizIcon {
+    var displayName: string;
+}
+
 type RedditIconVariant = 'colored' | 'black' | 'white';
 interface RedditIconProps extends Omit<SVGAttributes<SVGSVGElement>, 'viewBox' | 'fill' | 'xmlns'> {
     /** Visual variant of the icon */
@@ -377,4 +395,4 @@ declare namespace YouTubeIcon {
     var displayName: string;
 }
 
-export { FacebookIcon, type FacebookIconProps, type FacebookIconVariant, GmailIcon, type GmailIconProps, type GmailIconVariant, InstagramIcon, type InstagramIconProps, type InstagramVariant, LinkedInIcon, type LinkedInIconProps, type LinkedInIconVariant, RedditIcon, type RedditIconProps, type RedditIconVariant, SlackIcon, type SlackIconProps, type SlackIconVariant, TelegramIcon, type TelegramIconProps, type TelegramIconVariant, WhatsAppIcon, type WhatsAppIconProps, type WhatsAppIconVariant, XIcon, type XIconProps, type XIconVariant, YouTubeIcon, type YouTubeIconProps, type YouTubeIconVariant };
+export { FacebookIcon, type FacebookIconProps, type FacebookIconVariant, GmailIcon, type GmailIconProps, type GmailIconVariant, InstagramIcon, type InstagramIconProps, type InstagramVariant, LinkedInIcon, type LinkedInIconProps, type LinkedInIconVariant, PostizIcon, type PostizIconProps, type PostizIconVariant, RedditIcon, type RedditIconProps, type RedditIconVariant, SlackIcon, type SlackIconProps, type SlackIconVariant, TelegramIcon, type TelegramIconProps, type TelegramIconVariant, WhatsAppIcon, type WhatsAppIconProps, type WhatsAppIconVariant, XIcon, type XIconProps, type XIconVariant, YouTubeIcon, type YouTubeIconProps, type YouTubeIconVariant };

package/dist/icons/index.js

@@ -496,6 +496,161 @@ function LinkedInIcon({
   return /* @__PURE__ */ jsx("span", { className, style: { display: "inline-flex", width: size, height: size }, children: svgElement });
 }
 LinkedInIcon.displayName = "LinkedInIcon";
+var StyledIconWrapper3 = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  width: ${({ $size }) => `${$size}px`};
+  height: ${({ $size }) => `${$size}px`};
+  border-radius: ${({ theme }) => theme?.radii?.sm ?? "4px"};
+
+  &:hover:not(:disabled) {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+
+  &:active:not(:disabled) {
+    opacity: 0.6;
+    transform: scale(0.95);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => (theme?.colors?.primary && typeof theme.colors.primary === "object" ? theme.colors.primary.light : theme?.colors?.primary) ?? "#0066FF"};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Remove default focus outline, using focus-visible instead */
+  &:focus {
+    outline: none;
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+function PostizIcon({
+  variant = "colored",
+  size = 24,
+  className,
+  style,
+  "aria-label": ariaLabel = "Postiz",
+  onPress,
+  ...ariaProps
+}) {
+  const ref = useRef(null);
+  const isInteractive = Boolean(onPress);
+  const { buttonProps } = useButton(
+    {
+      ...ariaProps,
+      onPress,
+      "aria-label": ariaLabel,
+      isDisabled: !isInteractive
+    },
+    ref
+  );
+  const role = isInteractive ? "button" : "img";
+  const ariaHidden = !isInteractive && !ariaLabel;
+  const colors = {
+    colored: {
+      purple: "#612bd3",
+      dark: "#131019",
+      white: "#fff",
+      stroke: "#131019"
+    },
+    black: {
+      purple: "black",
+      dark: "black",
+      white: "black",
+      stroke: "black"
+    },
+    white: {
+      purple: "white",
+      dark: "white",
+      white: "white",
+      stroke: "white"
+    }
+  };
+  const c = colors[variant];
+  const svgElement = /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "26.74 0.02 460.94 509.34",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M103.4 82.6c.4 5.6.8 12 1.4 19.1L125 362.4c2.3 29.1 3.4 43.8 9.9 54.4 5.7 9.4 14.4 16.7 24.5 21 11.6 4.9 26.1 3.7 55.2 1.4l199.8-15.4c18.9-1.5 31.7-2.5 41.2-4.8-3.2 7.5-8.1 14.3-14.5 19.5-9.6 8-23.9 11.4-52.4 17.9l-195 45c-28.5 6.5-42.8 9.9-54.8 6.8-10.7-2.7-20.3-8.6-27.3-17.1-8-9.6-11.4-23.9-17.9-52.4L34.7 184c-6.5-28.5-9.9-42.8-6.8-54.8 2.7-10.7 8.6-20.3 17.1-27.3 9.6-8 23.9-11.4 52.4-17.9z",
+            fill: c.purple
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M112.8 101.1c-1.1-14.8-2-25.2-1.9-33.6 0-8.2.9-13.6 2.8-18 3.6-8.6 9.8-15.8 17.7-20.8 4.1-2.5 9.2-4.2 17.4-5.4 8.2-1.3 18.8-2.2 33.5-3.3L382 4.4c14.8-1.1 25.2-2 33.6-1.9 8.2 0 13.6.9 18 2.8 8.6 3.6 15.8 9.8 20.8 17.7 2.5 4.1 4.2 9.2 5.4 17.4s2.2 18.8 3.3 33.5l20.2 260.8c1.1 14.8 2 25.2 1.9 33.6 0 8.2-.9 13.6-2.8 18-3.6 8.6-9.8 15.8-17.7 20.8-4.1 2.5-9.2 4.2-17.4 5.4-8.2 1.3-18.8 2.2-33.5 3.3l-199.7 15.4c-14.8 1.1-25.2 2-33.6 1.9-8.2 0-13.6-.9-18-2.8-8.6-3.6-15.8-9.8-20.8-17.7-2.5-4.1-4.2-9.2-5.4-17.4-1.3-8.2-2.2-18.8-3.3-33.5z",
+            fill: "none",
+            stroke: c.stroke,
+            strokeWidth: "4.9373"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "m182.9 27.9 199.7-15.4c14.9-1.2 25-1.9 33-1.9 7.7 0 11.9.9 14.9 2.2 7 3 13 8 17 14.6 1.7 2.9 3.2 6.8 4.5 14.5 1.3 7.8 2.1 18 3.2 32.9l20.2 260.8c1.2 14.9 1.9 25 1.9 33 0 7.7-.9 11.9-2.2 14.9-3 7-8 13-14.6 17-2.9 1.7-6.8 3.2-14.5 4.5-7.8 1.3-18 2.1-32.9 3.2l-199.7 15.3c-14.8 1.2-25 1.9-33 1.9-7.7 0-11.9-.9-14.9-2.2-7-3-13-8-17-14.6-1.7-2.9-3.2-6.8-4.5-14.5-1.3-7.8-2.1-18-3.2-32.9l-20.2-260.8c-1.2-14.8-1.9-25-1.9-33 0-7.7.9-11.9 2.2-14.9 3-7 8-13 14.6-17 2.9-1.7 6.8-3.2 14.5-4.5 7.9-1.1 18.1-1.9 32.9-3.1",
+            fill: c.white
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "m269.4 88.3 1.9 24.8c3.5-4.3 7.9-7.9 13.4-11 5.4-3.3 12.3-5.2 20.4-5.8 7.4-.6 14.7.3 21.4 2.7 7 2.4 13.3 6.4 18.8 12.5 5.7 5.7 10.6 13.7 14.5 23.8s6.3 22.5 7.5 37.2c.8 10.5.7 21.2-.5 31.9-1 10.7-3.4 20.4-7.3 29.1-4 8.7-9.7 16-17.2 21.9-7.3 5.6-16.7 8.9-28.4 9.8-8.3.7-15 .1-20-1.8-5-2.1-8.8-4.6-11.5-7.4l6.2 80-46.5 15.5L221.8 92zm26.4 149c5.7-.4 10.4-2.7 14.1-6.7 3.7-4.3 6.3-9.5 8-15.8 2-6.3 3.1-13.3 3.4-20.8.5-7.7.5-15.3-.1-22.9-.9-12.1-2.8-21.6-5.5-28.4-2.5-6.8-5.3-11.9-8.4-14.9-3.2-3.3-6.1-5.2-9.1-5.9-2.7-.7-4.9-1-6.3-.8-4 .3-7.7 2.1-11.2 5.1-3.6 3-5.9 7.2-7.3 12.9l7.1 91.9c1.2 1.7 3.2 3.3 5.6 4.9 2.5 1.2 5.7 1.7 9.7 1.4",
+            fill: c.dark
+          }
+        )
+      ]
+    }
+  );
+  if (isInteractive) {
+    return /* @__PURE__ */ jsx(
+      StyledIconWrapper3,
+      {
+        ...buttonProps,
+        ref,
+        className,
+        style,
+        $size: size,
+        children: svgElement
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      style: { display: "inline-flex", width: size, height: size, ...style },
+      children: svgElement
+    }
+  );
+}
+PostizIcon.displayName = "PostizIcon";
 var ColoredVariant = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(
     "path",
@@ -978,6 +1133,13 @@ function WhatsAppIcon({
   );
 }
 WhatsAppIcon.displayName = "WhatsAppIcon";
+
+// src/theme/tokens.ts
+var tokens = {
+  borderRadius: {
+    sm: "0.25rem"}};
+
+// src/components/icons/XIcon/XIcon.styles.ts
 var StyledXIcon = styled.svg`
   display: inline-block;
   vertical-align: middle;
@@ -998,7 +1160,7 @@ var StyledXIcon = styled.svg`
     &:focus-visible {
       outline: 2px solid ${theme?.colors?.primary ?? "#007bff"};
       outline-offset: 2px;
-      border-radius: 2px;
+      border-radius: ${tokens.borderRadius.sm};
     }
   `}
 `;
@@ -1149,6 +1311,6 @@ function YouTubeIcon({
 }
 YouTubeIcon.displayName = "YouTubeIcon";
 
-export { FacebookIcon, GmailIcon, InstagramIcon, LinkedInIcon, RedditIcon, SlackIcon, TelegramIcon, WhatsAppIcon, XIcon, YouTubeIcon };
+export { FacebookIcon, GmailIcon, InstagramIcon, LinkedInIcon, PostizIcon, RedditIcon, SlackIcon, TelegramIcon, WhatsAppIcon, XIcon, YouTubeIcon };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map