@agentiffai/design 0.1.0

package/dist/icons/index.d.ts

@@ -0,0 +1,375 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { SVGAttributes, SVGProps } from 'react';
+import { AriaButtonProps } from '@react-aria/button';
+
+type FacebookIconVariant = 'colored' | 'black' | 'white';
+interface FacebookIconProps extends Omit<SVGAttributes<SVGSVGElement>, 'viewBox' | 'xmlns'> {
+    /**
+     * Visual variant of the icon
+     * - colored: Facebook brand colors (blue gradient)
+     * - black: Solid black
+     * - white: Solid white
+     */
+    variant?: FacebookIconVariant;
+    /**
+     * Size of the icon in pixels
+     */
+    size?: number;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Accessible label for the icon
+     * 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;
+}
+/**
+ * Facebook brand icon component with three variants
+ *
+ * @example
+ * // Colored variant (default)
+ * <FacebookIcon />
+ *
+ * @example
+ * // Black variant with custom size
+ * <FacebookIcon variant="black" size={32} />
+ *
+ * @example
+ * // Interactive icon with click handler
+ * <FacebookIcon
+ *   onClick={handleClick}
+ *   aria-label="Share on Facebook"
+ *   style={{ cursor: 'pointer' }}
+ * />
+ *
+ * @example
+ * // Decorative icon (hidden from screen readers)
+ * <FacebookIcon aria-hidden="true" />
+ */
+declare function FacebookIcon({ variant, size, className, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, onClick, ...svgProps }: FacebookIconProps): react_jsx_runtime.JSX.Element;
+declare namespace FacebookIcon {
+    var displayName: string;
+}
+
+type GmailIconVariant = 'colored' | 'black' | 'white';
+interface GmailIconProps extends Partial<AriaButtonProps> {
+    variant?: GmailIconVariant;
+    size?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    'aria-label'?: string;
+}
+
+declare function GmailIcon({ variant, size, className, style, 'aria-label': ariaLabel, onPress, ...ariaProps }: GmailIconProps): react_jsx_runtime.JSX.Element;
+declare namespace GmailIcon {
+    var displayName: string;
+}
+
+type InstagramVariant = 'colored' | 'black' | 'white';
+interface InstagramIconProps extends Omit<AriaButtonProps, 'children'> {
+    /**
+     * The variant of the Instagram icon
+     * - 'colored': Instagram brand gradient (purple to yellow)
+     * - 'black': Solid black icon
+     * - 'white': Solid white icon
+     * @default 'colored'
+     */
+    variant?: InstagramVariant;
+    /**
+     * Size of the icon in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Accessible label for the icon
+     * @default 'Instagram'
+     */
+    'aria-label'?: string;
+}
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * // Colored variant (default)
+ * <InstagramIcon />
+ *
+ * // Black variant with custom size
+ * <InstagramIcon variant="black" size={32} />
+ *
+ * // Interactive icon with click handler
+ * <InstagramIcon
+ *   variant="colored"
+ *   onPress={() => window.open('https://instagram.com')}
+ *   aria-label="Follow us on Instagram"
+ * />
+ * ```
+ */
+declare function InstagramIcon({ variant, size, className, 'aria-label': ariaLabel, onPress, ...ariaProps }: InstagramIconProps): react_jsx_runtime.JSX.Element;
+declare namespace InstagramIcon {
+    var displayName: string;
+}
+
+type LinkedInIconVariant = 'colored' | 'black' | 'white';
+interface LinkedInIconProps extends Partial<AriaButtonProps> {
+    variant?: LinkedInIconVariant;
+    size?: number;
+    className?: string;
+    'aria-label'?: string;
+}
+declare function LinkedInIcon({ variant, size, className, 'aria-label': ariaLabel, onPress, ...ariaProps }: LinkedInIconProps): react_jsx_runtime.JSX.Element;
+declare namespace LinkedInIcon {
+    var displayName: string;
+}
+
+type RedditIconVariant = 'colored' | 'black' | 'white';
+interface RedditIconProps extends Omit<SVGAttributes<SVGSVGElement>, 'viewBox' | 'fill' | 'xmlns'> {
+    /** Visual variant of the icon */
+    variant?: RedditIconVariant;
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Additional CSS class */
+    className?: string;
+    /** Click handler for interactive icons */
+    onClick?: () => void;
+    /** Accessible label for screen readers */
+    'aria-label'?: string;
+}
+declare function RedditIcon({ variant, size, className, onClick, 'aria-label': ariaLabel, ...svgProps }: RedditIconProps): react_jsx_runtime.JSX.Element;
+declare namespace RedditIcon {
+    var displayName: string;
+}
+
+type SlackIconVariant = 'colored' | 'black' | 'white';
+interface SlackIconProps {
+    variant?: SlackIconVariant;
+    size?: number;
+    className?: string;
+    onClick?: (event: React__default.MouseEvent<SVGSVGElement>) => void;
+    'aria-label'?: string;
+}
+declare function SlackIcon({ variant, size, className, onClick, 'aria-label': ariaLabel, }: SlackIconProps): react_jsx_runtime.JSX.Element;
+declare namespace SlackIcon {
+    var displayName: string;
+}
+
+type TelegramIconVariant = 'colored' | 'black' | 'white';
+interface TelegramIconProps extends Omit<SVGAttributes<SVGSVGElement>, 'viewBox' | 'xmlns'> {
+    /**
+     * Visual variant of the icon
+     * - colored: Telegram brand colors (blue gradient)
+     * - black: Solid black
+     * - white: Solid white
+     */
+    variant?: TelegramIconVariant;
+    /**
+     * Size of the icon in pixels
+     */
+    size?: number;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Accessible label for the icon
+     * 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;
+}
+/**
+ * Telegram brand icon component with three variants
+ *
+ * Features:
+ * - Three variants: colored (gradient), black, and white
+ * - Customizable size (default 24px)
+ * - Accessible with proper ARIA attributes
+ * - Works as both decorative and interactive elements
+ * - Inline SVG for optimal performance
+ *
+ * @example
+ * // Colored variant (default)
+ * <TelegramIcon />
+ *
+ * @example
+ * // Black variant with custom size
+ * <TelegramIcon variant="black" size={32} />
+ *
+ * @example
+ * // Interactive icon with click handler
+ * <TelegramIcon
+ *   onClick={handleClick}
+ *   aria-label="Share on Telegram"
+ *   style={{ cursor: 'pointer' }}
+ * />
+ *
+ * @example
+ * // Decorative icon (hidden from screen readers)
+ * <TelegramIcon aria-hidden="true" />
+ */
+declare function TelegramIcon({ variant, size, className, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, onClick, ...svgProps }: TelegramIconProps): react_jsx_runtime.JSX.Element;
+declare namespace TelegramIcon {
+    var displayName: string;
+}
+
+type WhatsAppIconVariant = 'colored' | 'black' | 'white';
+interface WhatsAppIconProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+    /**
+     * Visual variant of the icon
+     * - colored: Green WhatsApp brand color (#25D366) on white background
+     * - black: Solid black icon
+     * - white: Solid white icon
+     * @default 'colored'
+     */
+    variant?: WhatsAppIconVariant;
+    /**
+     * Size of the icon in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Accessible label for the icon
+     * Required for interactive icons, optional for decorative ones
+     */
+    'aria-label'?: string;
+    /**
+     * Whether the icon is decorative only (hidden from screen readers)
+     * @default false
+     */
+    'aria-hidden'?: boolean;
+    /**
+     * Click handler for interactive icons
+     */
+    onClick?: () => void;
+}
+/**
+ * WhatsApp brand icon component with three visual variants.
+ * Built with accessibility in mind - supports both decorative and interactive use cases.
+ *
+ * @example
+ * ```tsx
+ * // Decorative icon
+ * <WhatsAppIcon variant="colored" aria-hidden />
+ *
+ * // Interactive icon (button/link)
+ * <WhatsAppIcon
+ *   variant="white"
+ *   aria-label="Share on WhatsApp"
+ *   onClick={handleShare}
+ * />
+ *
+ * // Custom size
+ * <WhatsAppIcon size={32} variant="black" />
+ * ```
+ */
+declare function WhatsAppIcon({ variant, size, className, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, onClick, ...svgProps }: WhatsAppIconProps): react_jsx_runtime.JSX.Element;
+declare namespace WhatsAppIcon {
+    var displayName: string;
+}
+
+type XIconVariant = 'colored' | 'black' | 'white';
+interface XIconProps {
+    /**
+     * The variant of the X icon to display
+     * @default 'colored'
+     */
+    variant?: XIconVariant;
+    /**
+     * The size of the icon in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Click handler for interactive icons
+     */
+    onClick?: (event: React__default.MouseEvent<SVGSVGElement>) => void;
+    /**
+     * Accessible label for the icon
+     * If not provided and icon is interactive, defaults to "X (formerly Twitter) icon"
+     */
+    'aria-label'?: string;
+    /**
+     * Whether the icon is purely decorative (will hide from screen readers)
+     * @default false
+     */
+    decorative?: boolean;
+}
+/**
+ * XIcon component - Displays the X (formerly Twitter) icon with three variants
+ *
+ * This component renders the X social media icon with support for colored (black),
+ * explicit black, and white variants. It's fully accessible and can be used as both
+ * a decorative element and an interactive button.
+ *
+ * @example
+ * ```tsx
+ * // Colored variant (default, black)
+ * <XIcon />
+ *
+ * // White variant for dark backgrounds
+ * <XIcon variant="white" size={32} />
+ *
+ * // Interactive icon with click handler
+ * <XIcon
+ *   variant="colored"
+ *   onClick={() => window.open('https://x.com/yourhandle')}
+ *   aria-label="Visit our X profile"
+ * />
+ *
+ * // Decorative icon (hidden from screen readers)
+ * <XIcon decorative />
+ * ```
+ */
+declare function XIcon({ variant, size, className, onClick, 'aria-label': ariaLabel, decorative, }: XIconProps): react_jsx_runtime.JSX.Element;
+declare namespace XIcon {
+    var displayName: string;
+}
+
+type YouTubeIconVariant = 'colored' | 'black' | 'white';
+interface YouTubeIconProps {
+    variant?: YouTubeIconVariant;
+    size?: number;
+    className?: string;
+    onClick?: () => void;
+    'aria-label'?: string;
+}
+declare function YouTubeIcon({ variant, size, className, onClick, 'aria-label': ariaLabel, }: YouTubeIconProps): react_jsx_runtime.JSX.Element;
+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 };

package/dist/icons/index.js

@@ -0,0 +1,3 @@
+export { FacebookIcon, GmailIcon, InstagramIcon, LinkedInIcon, RedditIcon, SlackIcon, TelegramIcon, WhatsAppIcon, XIcon, YouTubeIcon } from '../chunk-PAOXD7DF.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}