@agentiffai/design 1.3.28 → 1.4.0

package/dist/YouTubeIcon-C1e6LEOF.d.ts

@@ -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 };

package/dist/copilotkit/index.cjs

@@ -18,50 +18,32 @@ var styled9__default = /*#__PURE__*/_interopDefault(styled9);
 // src/theme/tokens.ts
 var tokens = {
   colors: {
-    // Brand colors
     primary: "#2CB0AB",
-    // Teal (main brand color)
     secondary: "#264E68",
-    // Deep Blue
     accent: "#459FB9",
-    // Sea Green (additional brand color)
-    // Backgrounds - dark theme optimized
     background: {
       darkest: "#0a1b2a",
-      // Darkest Blue (brand color)
       darker: "#151a26",
-      // Discord gray (preserved)
       dark: "#1b2230",
-      // Discord surface gray (preserved)
       light: "#252d3d"
-      // Discord border gray (preserved)
     },
-    // Text hierarchy
     text: {
       primary: "#FFFFFF",
       secondary: "#B4B8C5",
       tertiary: "#9CA3AF",
       disabled: "#4B5563"
     },
-    // Teal (brand aligned)
     error: "#EF4444",
-    // Sky Blue (brand aligned)
-    // Status colors (for workflow/SSE events)
     status: {
       idle: "#6B7280",
       running: "#459FB9",
-      // Teal (brand aligned)
       failed: "#EF4444"},
-    // Connection status
     connection: {
       connected: "#2CB0AB",
-      // Teal (brand aligned)
       streaming: "#459FB9",
-      // Sky Blue (brand aligned)
       disconnected: "#EF4444",
       reconnecting: "#F59E0B"
     },
-    // Surface variants (for overlays, cards, panels)
     surface: {
       base: "#1b2230",
       elevated: "#252d3d",
@@ -71,26 +53,20 @@ var tokens = {
       glass: "rgba(255, 255, 255, 0.26)",
       glassBorder: "rgba(255, 255, 255, 0.3)"
     },
-    // UI Element colors
     border: {
       default: "rgba(255, 255, 255, 0.1)",
       subtle: "rgba(255, 255, 255, 0.05)",
       hover: "rgba(255, 255, 255, 0.2)",
       focus: "#2CB0AB"},
-    // Scrollbar colors
     scrollbar: {
       track: "transparent",
       thumb: "rgba(255, 255, 255, 0.2)",
       thumbHover: "rgba(255, 255, 255, 0.3)"
     },
-    // Message bubbles
     message: {
       user: "#264E68",
-      // Deep Blue (brand color)
       ai: "#1b2230",
-      // Dark background
       system: "#151a26"
-      // Darker background
     },
     backdrop: "rgba(27, 34, 48, 0.95)"},
   typography: {
@@ -100,13 +76,9 @@ var tokens = {
     },
     fontSize: {
       xs: "0.875rem",
-      // 14px (was 12px, increased for better readability)
       sm: "1rem",
-      // 16px (was 14px, increased for better readability)
       base: "1.125rem",
-      // 18px (was 16px, increased for better readability)
       lg: "1.125rem",
-      // 20px (heading size, unchanged)
       "2xl": "1.5rem"},
     fontWeight: {
       regular: 400,
@@ -120,28 +92,18 @@ var tokens = {
   },
   spacing: {
     xs: "0.25rem",
-    // 4px
     sm: "0.5rem",
-    // 8px
     md: "1rem",
-    // 16px
     lg: "1.5rem",
-    // 24px
     xl: "2rem"},
   borderRadius: {
     none: "0",
     sm: "0.25rem",
-    // 4px
     md: "0.5rem",
-    // 8px
     lg: "0.75rem",
-    // 12px
     xl: "1rem",
-    // 16px
     "2xl": "1.5rem",
-    // 24px
     full: "9999px"
-    // Fully rounded
   },
   shadows: {
     none: "none",
@@ -162,8 +124,7 @@ var tokens = {
       short: "200ms",
       medium: "300ms"},
     easing: {
-      smooth: "cubic-bezier(0.4, 0, 0.2, 1)"}
-  },
+      smooth: "cubic-bezier(0.4, 0, 0.2, 1)"}},
   zIndex: {
     fixed: 1030,
     modal: 1200},
@@ -3492,7 +3453,6 @@ function CustomCopilotSidebar2({
         Header: HeaderAdapterWithClose,
         Window: WindowAdapter,
         Button: CustomButton,
-        RenderActionExecutionMessage: ActionExecutionAdapter,
         instructions,
         labels: {
           title: "AI Assistant",
@@ -4321,6 +4281,10 @@ function SuggestionChip({ suggestion, onSelect }) {
 }
 Suggestions.displayName = "Suggestions";
 
+Object.defineProperty(exports, "useChatContext", {
+  enumerable: true,
+  get: function () { return reactUi.useChatContext; }
+});
 exports.ActionExecutionAdapter = ActionExecutionAdapter;
 exports.Actions = Actions;
 exports.AgentState = AgentState;