@agentiffai/design 1.3.28 → 1.4.0

package/dist/YouTubeIcon-C1e6LEOF.d.cts

@@ -0,0 +1,398 @@
+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<SVGAttributes<SVGSVGElement>, 'viewBox' | 'xmlns'> {
+    /**
+     * 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
+     */
+    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;
+}
+/**
+ * Instagram brand icon component with three variants
+ *
+ * @example
+ * // Colored variant (default)
+ * <InstagramIcon />
+ *
+ * @example
+ * // Black variant with custom size
+ * <InstagramIcon variant="black" size={32} />
+ *
+ * @example
+ * // Interactive icon with click handler
+ * <InstagramIcon
+ *   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, 'aria-hidden': ariaHidden, onClick, ...svgProps }: 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 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 */
+    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 { type FacebookIconProps as F, type GmailIconProps as G, type InstagramIconProps as I, type LinkedInIconProps as L, type PostizIconProps as P, type RedditIconProps as R, type SlackIconProps as S, type TelegramIconProps as T, type WhatsAppIconProps as W, type XIconProps as X, type YouTubeIconProps as Y, type FacebookIconVariant as a, FacebookIcon as b, type GmailIconVariant as c, GmailIcon as d, type InstagramVariant as e, InstagramIcon as f, type LinkedInIconVariant as g, LinkedInIcon as h, type PostizIconVariant as i, PostizIcon as j, type RedditIconVariant as k, RedditIcon as l, type SlackIconVariant as m, SlackIcon as n, type TelegramIconVariant as o, TelegramIcon as p, type WhatsAppIconVariant as q, WhatsAppIcon as r, type XIconVariant as s, XIcon as t, type YouTubeIconVariant as u, YouTubeIcon as v };