@agentiffai/design 0.1.7 → 0.1.9

package/dist/icons/index.d.ts

@@ -76,18 +76,16 @@ declare namespace GmailIcon {
 }
 
 type InstagramVariant = 'colored' | 'black' | 'white';
-interface InstagramIconProps extends Omit<AriaButtonProps, 'children'> {
+interface InstagramIconProps extends Omit<SVGAttributes<SVGSVGElement>, 'viewBox' | 'xmlns'> {
     /**
-     * The variant of the Instagram icon
-     * - 'colored': Instagram brand gradient (purple to yellow)
-     * - 'black': Solid black icon
-     * - 'white': Solid white icon
-     * @default 'colored'
+     * Visual variant of the icon
+     * - colored: Instagram brand gradient (purple to yellow)
+     * - black: Solid black
+     * - white: Solid white
      */
     variant?: InstagramVariant;
     /**
      * Size of the icon in pixels
-     * @default 24
      */
     size?: number;
     /**
@@ -96,35 +94,42 @@ interface InstagramIconProps extends Omit<AriaButtonProps, 'children'> {
     className?: string;
     /**
      * Accessible label for the icon
-     * @default 'Instagram'
+     * Required for interactive icons, optional for decorative
      */
     'aria-label'?: string;
+    /**
+     * Whether the icon is decorative (hidden from screen readers)
+     */
+    'aria-hidden'?: boolean;
+    /**
+     * Click handler for interactive icons
+     */
+    onClick?: () => void;
 }
 /**
- * InstagramIcon component - Displays the Instagram logo with multiple variants
- *
- * This component renders the Instagram logo with three visual variants:
- * colored (brand gradient), black, and white. It uses React ARIA for
- * accessibility and can function as both a decorative icon and an
- * interactive button.
+ * Instagram brand icon component with three variants
  *
  * @example
- * ```tsx
  * // Colored variant (default)
  * <InstagramIcon />
  *
+ * @example
  * // Black variant with custom size
  * <InstagramIcon variant="black" size={32} />
  *
+ * @example
  * // Interactive icon with click handler
  * <InstagramIcon
- *   variant="colored"
- *   onPress={() => window.open('https://instagram.com')}
- *   aria-label="Follow us on Instagram"
+ *   onClick={handleClick}
+ *   aria-label="Share on Instagram"
+ *   style={{ cursor: 'pointer' }}
  * />
- * ```
+ *
+ * @example
+ * // Decorative icon (hidden from screen readers)
+ * <InstagramIcon aria-hidden="true" />
  */
-declare function InstagramIcon({ variant, size, className, 'aria-label': ariaLabel, onPress, ...ariaProps }: InstagramIconProps): react_jsx_runtime.JSX.Element;
+declare function InstagramIcon({ variant, size, className, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, onClick, ...svgProps }: InstagramIconProps): react_jsx_runtime.JSX.Element;
 declare namespace InstagramIcon {
     var displayName: string;
 }

package/dist/icons/index.js

@@ -278,185 +278,86 @@ function GmailIcon({
   );
 }
 GmailIcon.displayName = "GmailIcon";
-var StyledInstagramIcon = styled.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  border-radius: ${(props) => props.theme.radii?.sm || "4px"};
-  transition: all 0.2s ease;
-
-  /* Focus visible state for accessibility */
-  &:focus-visible {
-    outline: 2px solid ${(props) => props.theme.colors?.primary || "#007bff"};
-    outline-offset: 2px;
-  }
-
-  /* Hover state */
-  &:hover:not(:disabled) {
-    opacity: 0.8;
-    transform: scale(1.05);
-  }
-
-  /* Active/pressed state */
-  &:active:not(:disabled) {
-    transform: scale(0.95);
-  }
-
-  /* Disabled state */
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* Remove default button styles */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  /* Ensure SVG is properly displayed */
-  svg {
-    display: block;
-    pointer-events: none;
-  }
-`;
 function InstagramIcon({
   variant = "colored",
   size = 24,
   className,
-  "aria-label": ariaLabel = "Instagram",
-  onPress,
-  ...ariaProps
+  "aria-label": ariaLabel,
+  "aria-hidden": ariaHidden,
+  onClick,
+  ...svgProps
 }) {
-  const ref = useRef(null);
   const gradientId = useId();
-  const isInteractive = Boolean(onPress || ariaProps.onPressStart || ariaProps.onPressEnd);
-  const { buttonProps } = useButton(
-    {
-      ...ariaProps,
-      onPress,
-      "aria-label": ariaLabel,
-      // If not interactive, mark as presentation
-      ...isInteractive ? {} : { "aria-hidden": true }
-    },
-    ref
-  );
-  const renderSvgContent = () => {
-    const paths = {
-      path1: "M12.0053 7.37695C9.45144 7.37695 7.37952 9.44766 7.37952 12C7.37952 14.5523 9.45144 16.623 12.0053 16.623C14.5591 16.623 16.631 14.5523 16.631 12C16.631 9.44766 14.5591 7.37695 12.0053 7.37695ZM12.0053 14.9988C10.3484 14.9988 9.00469 13.6559 9.00469 12C9.00469 10.3441 10.3484 9.00117 12.0053 9.00117C13.6621 9.00117 15.0059 10.3441 15.0059 12C15.0059 13.6559 13.6621 14.9988 12.0053 14.9988Z",
-      path2: "M16.814 8.27345C17.4084 8.27345 17.8939 7.79181 17.8939 7.19415C17.8939 6.60001 17.4084 6.11485 16.814 6.11485C16.2195 6.11485 15.734 6.59649 15.734 7.19415C15.734 7.78829 16.2159 8.27345 16.814 8.27345Z",
-      path3: "M12.0053 3C9.56048 3 9.25445 3.01055 8.29412 3.05273C7.33731 3.09492 6.6795 3.24961 6.10963 3.47109C5.51515 3.70312 5.01212 4.00898 4.51261 4.51172C4.00958 5.01094 3.70354 5.51367 3.47137 6.1043C3.24976 6.67734 3.09498 7.33125 3.05277 8.2875C3.01055 9.25078 3 9.55664 3 12C3 14.4434 3.01055 14.7492 3.05277 15.709C3.09498 16.6652 3.24976 17.3227 3.47137 17.8922C3.70354 18.4863 4.00958 18.9891 4.51261 19.4883C5.01212 19.9875 5.51515 20.2969 6.10612 20.5254C6.6795 20.7469 7.33379 20.9016 8.2906 20.9437C9.25093 20.9859 9.55697 20.9965 12.0018 20.9965C14.4465 20.9965 14.7526 20.9859 15.7129 20.9437C16.6697 20.9016 17.3275 20.7469 17.8974 20.5254C18.4884 20.2969 18.9914 19.9875 19.4909 19.4883C19.9904 18.9891 20.3 18.4863 20.5286 17.8957C20.7502 17.3227 20.905 16.6687 20.9472 15.7125C20.9894 14.7527 21 14.4469 21 12.0035C21 9.56016 20.9894 9.2543 20.9472 8.29453C20.905 7.33828 20.7502 6.68086 20.5286 6.11133C20.307 5.51367 20.001 5.01094 19.4979 4.51172C18.9984 4.0125 18.4954 3.70312 17.9044 3.47461C17.3311 3.25312 16.6768 3.09844 15.72 3.05625C14.7561 3.01055 14.4501 3 12.0053 3ZM12.0053 4.6207C14.4114 4.6207 14.6963 4.63125 15.6426 4.67344C16.522 4.71211 16.9969 4.85977 17.3135 4.98281C17.7321 5.14453 18.0346 5.34141 18.3477 5.6543C18.6643 5.9707 18.8577 6.26953 19.0195 6.68789C19.1427 7.0043 19.2904 7.48242 19.3291 8.35781C19.3713 9.30703 19.3819 9.5918 19.3819 11.993C19.3819 14.3977 19.3713 14.6824 19.3291 15.6281C19.2904 16.507 19.1427 16.9816 19.0195 17.298C18.8577 17.7164 18.6607 18.0188 18.3477 18.3316C18.0311 18.648 17.7321 18.8414 17.3135 19.0031C16.9969 19.1262 16.5185 19.2738 15.6426 19.3125C14.6928 19.3547 14.4079 19.3652 12.0053 19.3652C9.59918 19.3652 9.31425 19.3547 8.36799 19.3125C7.48857 19.2738 7.01368 19.1262 6.69709 19.0031C6.27848 18.8414 5.97596 18.6445 5.66289 18.3316C5.3463 18.0152 5.15282 17.7164 4.99101 17.298C4.86789 16.9816 4.72015 16.5035 4.68145 15.6281C4.63924 14.6789 4.62869 14.3941 4.62869 11.993C4.62869 9.58828 4.63924 9.30351 4.68145 8.35781C4.72015 7.47891 4.86789 7.0043 4.99101 6.68789C5.15282 6.26953 5.34981 5.96719 5.66289 5.6543C5.97948 5.33789 6.27848 5.14453 6.69709 4.98281C7.01368 4.85977 7.49209 4.71211 8.36799 4.67344C9.31425 4.63125 9.59918 4.6207 12.0053 4.6207Z"
-    };
-    switch (variant) {
-      case "colored":
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: gradientId,
-              x1: "16",
-              y1: "3",
-              x2: "6.5",
-              y2: "21",
-              gradientUnits: "userSpaceOnUse",
-              children: [
-                /* @__PURE__ */ jsx("stop", { stopColor: "#6E3BF1" }),
-                /* @__PURE__ */ jsx("stop", { offset: "0.241314", stopColor: "#C128BF" }),
-                /* @__PURE__ */ jsx("stop", { offset: "0.475694", stopColor: "#EA336B" }),
-                /* @__PURE__ */ jsx("stop", { offset: "0.715281", stopColor: "#EE8131" }),
-                /* @__PURE__ */ jsx("stop", { offset: "0.913202", stopColor: "#F8D849" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fillRule: "evenodd",
-              clipRule: "evenodd",
-              d: paths.path1,
-              fill: `url(#${gradientId})`
-            }
-          ),
-          /* @__PURE__ */ jsx("path", { d: paths.path2, fill: `url(#${gradientId})` }),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              fillRule: "evenodd",
-              clipRule: "evenodd",
-              d: paths.path3,
-              fill: `url(#${gradientId})`
-            }
-          )
-        ] });
-      case "black":
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: paths.path1, fill: "black" }),
-          /* @__PURE__ */ jsx("path", { d: paths.path2, fill: "black" }),
-          /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: paths.path3, fill: "black" })
-        ] });
-      case "white":
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: paths.path1, fill: "white" }),
-          /* @__PURE__ */ jsx("path", { d: paths.path2, fill: "white" }),
-          /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: paths.path3, fill: "white" })
-        ] });
-      default:
-        return null;
+  const isInteractive = !!onClick;
+  const ariaAttributes = {
+    "aria-label": ariaLabel,
+    "aria-hidden": ariaHidden !== void 0 ? ariaHidden : !ariaLabel && !isInteractive,
+    role: isInteractive ? "button" : void 0,
+    tabIndex: isInteractive ? 0 : void 0
+  };
+  const handleKeyDown = (event) => {
+    if (isInteractive && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onClick?.();
     }
   };
-  if (!isInteractive) {
-    return /* @__PURE__ */ jsx("span", { className, "aria-hidden": "true", children: /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        width: size,
-        height: size,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        style: { display: "block" },
-        role: "img",
-        "aria-label": ariaLabel,
-        children: [
-          /* @__PURE__ */ jsx("title", { children: ariaLabel }),
-          renderSvgContent()
-        ]
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsx(
-    StyledInstagramIcon,
-    {
-      ...buttonProps,
-      ref,
-      className,
-      $size: size,
-      role: "button",
-      tabIndex: 0,
-      children: /* @__PURE__ */ jsxs(
-        "svg",
+  const commonProps = {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    onClick,
+    onKeyDown: isInteractive ? handleKeyDown : void 0,
+    ...ariaAttributes,
+    ...svgProps
+  };
+  const paths = {
+    // Camera lens circle
+    path1: "M12.0053 7.37695C9.45144 7.37695 7.37952 9.44766 7.37952 12C7.37952 14.5523 9.45144 16.623 12.0053 16.623C14.5591 16.623 16.631 14.5523 16.631 12C16.631 9.44766 14.5591 7.37695 12.0053 7.37695ZM12.0053 14.9988C10.3484 14.9988 9.00469 13.6559 9.00469 12C9.00469 10.3441 10.3484 9.00117 12.0053 9.00117C13.6621 9.00117 15.0059 10.3441 15.0059 12C15.0059 13.6559 13.6621 14.9988 12.0053 14.9988Z",
+    // Flash dot
+    path2: "M16.814 8.27345C17.4084 8.27345 17.8939 7.79181 17.8939 7.19415C17.8939 6.60001 17.4084 6.11485 16.814 6.11485C16.2195 6.11485 15.734 6.59649 15.734 7.19415C15.734 7.78829 16.2159 8.27345 16.814 8.27345Z",
+    // Outer rounded square
+    path3: "M12.0053 3C9.56048 3 9.25445 3.01055 8.29412 3.05273C7.33731 3.09492 6.6795 3.24961 6.10963 3.47109C5.51515 3.70312 5.01212 4.00898 4.51261 4.51172C4.00958 5.01094 3.70354 5.51367 3.47137 6.1043C3.24976 6.67734 3.09498 7.33125 3.05277 8.2875C3.01055 9.25078 3 9.55664 3 12C3 14.4434 3.01055 14.7492 3.05277 15.709C3.09498 16.6652 3.24976 17.3227 3.47137 17.8922C3.70354 18.4863 4.00958 18.9891 4.51261 19.4883C5.01212 19.9875 5.51515 20.2969 6.10612 20.5254C6.6795 20.7469 7.33379 20.9016 8.2906 20.9437C9.25093 20.9859 9.55697 20.9965 12.0018 20.9965C14.4465 20.9965 14.7526 20.9859 15.7129 20.9437C16.6697 20.9016 17.3275 20.7469 17.8974 20.5254C18.4884 20.2969 18.9914 19.9875 19.4909 19.4883C19.9904 18.9891 20.3 18.4863 20.5286 17.8957C20.7502 17.3227 20.905 16.6687 20.9472 15.7125C20.9894 14.7527 21 14.4469 21 12.0035C21 9.56016 20.9894 9.2543 20.9472 8.29453C20.905 7.33828 20.7502 6.68086 20.5286 6.11133C20.307 5.51367 20.001 5.01094 19.4979 4.51172C18.9984 4.0125 18.4954 3.70312 17.9044 3.47461C17.3311 3.25312 16.6768 3.09844 15.72 3.05625C14.7561 3.01055 14.4501 3 12.0053 3ZM12.0053 4.6207C14.4114 4.6207 14.6963 4.63125 15.6426 4.67344C16.522 4.71211 16.9969 4.85977 17.3135 4.98281C17.7321 5.14453 18.0346 5.34141 18.3477 5.6543C18.6643 5.9707 18.8577 6.26953 19.0195 6.68789C19.1427 7.0043 19.2904 7.48242 19.3291 8.35781C19.3713 9.30703 19.3819 9.5918 19.3819 11.993C19.3819 14.3977 19.3713 14.6824 19.3291 15.6281C19.2904 16.507 19.1427 16.9816 19.0195 17.298C18.8577 17.7164 18.6607 18.0188 18.3477 18.3316C18.0311 18.648 17.7321 18.8414 17.3135 19.0031C16.9969 19.1262 16.5185 19.2738 15.6426 19.3125C14.6928 19.3547 14.4079 19.3652 12.0053 19.3652C9.59918 19.3652 9.31425 19.3547 8.36799 19.3125C7.48857 19.2738 7.01368 19.1262 6.69709 19.0031C6.27848 18.8414 5.97596 18.6445 5.66289 18.3316C5.3463 18.0152 5.15282 17.7164 4.99101 17.298C4.86789 16.9816 4.72015 16.5035 4.68145 15.6281C4.63924 14.6789 4.62869 14.3941 4.62869 11.993C4.62869 9.58828 4.63924 9.30351 4.68145 8.35781C4.72015 7.47891 4.86789 7.0043 4.99101 6.68789C5.15282 6.26953 5.34981 5.96719 5.66289 5.6543C5.97948 5.33789 6.27848 5.14453 6.69709 4.98281C7.01368 4.85977 7.49209 4.71211 8.36799 4.67344C9.31425 4.63125 9.59918 4.6207 12.0053 4.6207Z"
+  };
+  if (variant === "colored") {
+    return /* @__PURE__ */ jsxs("svg", { ...commonProps, children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "linearGradient",
         {
-          width: size,
-          height: size,
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          style: { display: "block" },
-          role: "img",
-          "aria-label": ariaLabel,
+          id: gradientId,
+          x1: "16",
+          y1: "3",
+          x2: "6.5",
+          y2: "21",
+          gradientUnits: "userSpaceOnUse",
           children: [
-            /* @__PURE__ */ jsx("title", { children: ariaLabel }),
-            renderSvgContent()
+            /* @__PURE__ */ jsx("stop", { stopColor: "#6E3BF1" }),
+            /* @__PURE__ */ jsx("stop", { offset: "0.241314", stopColor: "#C128BF" }),
+            /* @__PURE__ */ jsx("stop", { offset: "0.475694", stopColor: "#EA336B" }),
+            /* @__PURE__ */ jsx("stop", { offset: "0.715281", stopColor: "#EE8131" }),
+            /* @__PURE__ */ jsx("stop", { offset: "0.913202", stopColor: "#F8D849" })
           ]
         }
-      )
-    }
-  );
+      ) }),
+      /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: paths.path1, fill: `url(#${gradientId})` }),
+      /* @__PURE__ */ jsx("path", { d: paths.path2, fill: `url(#${gradientId})` }),
+      /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: paths.path3, fill: `url(#${gradientId})` })
+    ] });
+  }
+  if (variant === "black") {
+    return /* @__PURE__ */ jsxs("svg", { ...commonProps, children: [
+      /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: paths.path1, fill: "black" }),
+      /* @__PURE__ */ jsx("path", { d: paths.path2, fill: "black" }),
+      /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: paths.path3, fill: "black" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { ...commonProps, children: [
+    /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: paths.path1, fill: "white" }),
+    /* @__PURE__ */ jsx("path", { d: paths.path2, fill: "white" }),
+    /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: paths.path3, fill: "white" })
+  ] });
 }
 InstagramIcon.displayName = "InstagramIcon";
 var StyledIconWrapper2 = styled.button`