@agentiffai/design 0.1.0

package/dist/layout/index.d.cts

@@ -0,0 +1,206 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { A as AriaButtonProps } from '../index.d-DYU1eVeb.cjs';
+
+declare const IconNames: {
+    readonly MIC: "mic-fill";
+    readonly MIC_OFF: "mic-off-fill";
+    readonly HEADPHONE: "headphone-fill";
+    readonly VOLUME_MUTE: "volume-mute-fill";
+    readonly SETTINGS: "settings-3-fill";
+    readonly SETTINGS_FILL: "settings-fill";
+    readonly SETTINGS_LINE: "settings-line";
+    readonly HOME: "home-fill";
+    readonly ADD_CIRCLE: "add-circle-fill";
+    readonly COMPASS_DISCOVER: "compass-discover-fill";
+    readonly DOWNLOAD: "download-2-fill";
+    readonly ARROW_LEFT: "arrow-left-fill";
+    readonly CALENDAR: "calendar-fill";
+    readonly CHAT: "chat-1-fill";
+};
+type IconName = (typeof IconNames)[keyof typeof IconNames];
+
+interface IconProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
+    name: IconName;
+    size?: number;
+    color?: string;
+    className?: string;
+}
+declare function Icon({ name, size, color, className, ...imgProps }: IconProps): react_jsx_runtime.JSX.Element;
+declare namespace Icon {
+    var displayName: string;
+}
+
+interface LayoutProps {
+    mainPaneSlot: ReactNode;
+    navVerticalSlot?: ReactNode;
+    navHorizontalUserSlot?: ReactNode;
+    navHorizontalActionsSlot?: ReactNode;
+    onNavBackClick?: () => void;
+    className?: string;
+}
+declare function Layout({ mainPaneSlot, navVerticalSlot, navHorizontalUserSlot, navHorizontalActionsSlot, onNavBackClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
+declare namespace Layout {
+    var displayName: string;
+}
+
+interface NavHorizontalProps {
+    userStatusSlot?: ReactNode;
+    actionsSlot?: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+}
+declare function NavHorizontal({ userStatusSlot, actionsSlot, className, 'aria-label': ariaLabel, }: NavHorizontalProps): react_jsx_runtime.JSX.Element;
+declare namespace NavHorizontal {
+    var displayName: string;
+}
+
+interface ActionButtonsProps {
+    onCalendarClick?: () => void;
+    onSettingsClick?: () => void;
+    onChatClick?: () => void;
+    isCalendarActive?: boolean;
+    isSettingsActive?: boolean;
+    isChatActive?: boolean;
+    className?: string;
+}
+declare function ActionButtons({ onCalendarClick, onSettingsClick, onChatClick: _onChatClick, isCalendarActive, isSettingsActive, isChatActive: _isChatActive, className, }: ActionButtonsProps): react_jsx_runtime.JSX.Element;
+declare namespace ActionButtons {
+    var displayName: string;
+}
+
+interface WorkflowStatusCardProps extends Omit<AriaButtonProps, 'children'> {
+    icon: ReactNode;
+    workflowName: string;
+    status?: 'online' | 'idle' | 'busy' | 'offline';
+    statusText?: string;
+    className?: string;
+    onClick?: () => void;
+}
+declare function WorkflowStatusCard({ icon, workflowName, status, statusText, className, onClick, onPress, isDisabled, ...ariaProps }: WorkflowStatusCardProps): react_jsx_runtime.JSX.Element;
+declare namespace WorkflowStatusCard {
+    var displayName: string;
+}
+
+interface NavVerticalProps {
+    onBackClick?: () => void;
+    onHomeClick?: () => void;
+    folderGroupsSlot?: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+}
+declare function NavVertical({ onBackClick, onHomeClick, folderGroupsSlot, className, 'aria-label': ariaLabel, }: NavVerticalProps): react_jsx_runtime.JSX.Element;
+declare namespace NavVertical {
+    var displayName: string;
+}
+
+interface ActionLog {
+    id: string;
+    text: string;
+    timestamp: string;
+    icon?: React.ReactNode;
+    iconColor?: string;
+}
+interface RunItem {
+    id: string;
+    name: string;
+    status: 'completed' | 'running' | 'failed';
+    details: string;
+    category: 'scheduled' | 'completed' | 'issues';
+    icon?: 'bell' | 'file' | 'link' | 'chat' | 'warning';
+    logs?: ActionLog[];
+}
+interface PaneMenusProps {
+    activeTab?: 'runs' | 'usage' | 'connections';
+    onTabChange?: (tab: 'runs' | 'usage' | 'connections') => void;
+    runs?: RunItem[];
+    currentUsage?: number;
+    maxUsage?: number;
+    isGoogleConnected?: boolean;
+    onGoogleConnect?: () => void;
+    onGoogleDisconnect?: () => void;
+    onBrowseAutomations?: () => void;
+}
+declare function PaneMenus({ activeTab, onTabChange, runs, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, onBrowseAutomations, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
+
+type BrandType = 'Google' | 'Microsoft' | 'Slack' | 'YouTube';
+interface PaneSectionHeaderProps {
+    /**
+     * Brand logo to display in the center of the header
+     * @default 'Google'
+     */
+    brand?: BrandType;
+    /**
+     * Callback fired when back button is clicked
+     */
+    onBackClick?: () => void;
+    /**
+     * Callback fired when settings button is clicked
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Accessible label for the header
+     */
+    'aria-label'?: string;
+}
+/**
+ * PaneSectionHeader component
+ *
+ * A fixed-height header positioned at the top of the main pane section.
+ * Features a centered brand logo and a settings button in the top-right corner.
+ * Background includes responsive Rays2 pattern from the design system.
+ *
+ * @example
+ * ```tsx
+ * <PaneSectionHeader
+ *   brand="Google"
+ *   onSettingsClick={() => console.log('Settings clicked')}
+ * />
+ * ```
+ */
+declare function PaneSectionHeader({ brand, onBackClick, onSettingsClick, className, 'aria-label': ariaLabel, }: PaneSectionHeaderProps): react_jsx_runtime.JSX.Element;
+declare namespace PaneSectionHeader {
+    var displayName: string;
+}
+
+type ServiceBrand = 'Facebook' | 'Gmail' | 'Instagram' | 'LinkedIn' | 'Reddit' | 'Slack' | 'Telegram' | 'WhatsApp' | 'X' | 'YouTube';
+interface ServiceIconProps extends AriaButtonProps {
+    /**
+     * Brand logo to display
+     */
+    brand: ServiceBrand;
+    /**
+     * Whether the service icon is active/selected
+     */
+    active?: boolean;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+/**
+ * ServiceIcon component
+ *
+ * Displays a circular brand logo icon that can be used as a service selector.
+ * Uses colored brand logos from assets/icons/Brand and supports active/hover states.
+ *
+ * @example
+ * ```tsx
+ * <ServiceIcon
+ *   brand="Gmail"
+ *   active={true}
+ *   onPress={() => console.log('Gmail clicked')}
+ *   aria-label="Gmail service"
+ * />
+ * ```
+ */
+declare function ServiceIcon({ brand, active, className, ...ariaProps }: ServiceIconProps): react_jsx_runtime.JSX.Element;
+declare namespace ServiceIcon {
+    var displayName: string;
+}
+
+export { ActionButtons, type ActionButtonsProps, type BrandType, Icon, type IconName, IconNames, type IconProps, Layout, type LayoutProps, NavHorizontal, type NavHorizontalProps, NavVertical, type NavVerticalProps, PaneMenus, type PaneMenusProps, PaneSectionHeader, type PaneSectionHeaderProps, type ServiceBrand, ServiceIcon, type ServiceIconProps, WorkflowStatusCard, type WorkflowStatusCardProps };

package/dist/layout/index.d.ts

@@ -0,0 +1,206 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { A as AriaButtonProps } from '../index.d-DYU1eVeb.js';
+
+declare const IconNames: {
+    readonly MIC: "mic-fill";
+    readonly MIC_OFF: "mic-off-fill";
+    readonly HEADPHONE: "headphone-fill";
+    readonly VOLUME_MUTE: "volume-mute-fill";
+    readonly SETTINGS: "settings-3-fill";
+    readonly SETTINGS_FILL: "settings-fill";
+    readonly SETTINGS_LINE: "settings-line";
+    readonly HOME: "home-fill";
+    readonly ADD_CIRCLE: "add-circle-fill";
+    readonly COMPASS_DISCOVER: "compass-discover-fill";
+    readonly DOWNLOAD: "download-2-fill";
+    readonly ARROW_LEFT: "arrow-left-fill";
+    readonly CALENDAR: "calendar-fill";
+    readonly CHAT: "chat-1-fill";
+};
+type IconName = (typeof IconNames)[keyof typeof IconNames];
+
+interface IconProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
+    name: IconName;
+    size?: number;
+    color?: string;
+    className?: string;
+}
+declare function Icon({ name, size, color, className, ...imgProps }: IconProps): react_jsx_runtime.JSX.Element;
+declare namespace Icon {
+    var displayName: string;
+}
+
+interface LayoutProps {
+    mainPaneSlot: ReactNode;
+    navVerticalSlot?: ReactNode;
+    navHorizontalUserSlot?: ReactNode;
+    navHorizontalActionsSlot?: ReactNode;
+    onNavBackClick?: () => void;
+    className?: string;
+}
+declare function Layout({ mainPaneSlot, navVerticalSlot, navHorizontalUserSlot, navHorizontalActionsSlot, onNavBackClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
+declare namespace Layout {
+    var displayName: string;
+}
+
+interface NavHorizontalProps {
+    userStatusSlot?: ReactNode;
+    actionsSlot?: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+}
+declare function NavHorizontal({ userStatusSlot, actionsSlot, className, 'aria-label': ariaLabel, }: NavHorizontalProps): react_jsx_runtime.JSX.Element;
+declare namespace NavHorizontal {
+    var displayName: string;
+}
+
+interface ActionButtonsProps {
+    onCalendarClick?: () => void;
+    onSettingsClick?: () => void;
+    onChatClick?: () => void;
+    isCalendarActive?: boolean;
+    isSettingsActive?: boolean;
+    isChatActive?: boolean;
+    className?: string;
+}
+declare function ActionButtons({ onCalendarClick, onSettingsClick, onChatClick: _onChatClick, isCalendarActive, isSettingsActive, isChatActive: _isChatActive, className, }: ActionButtonsProps): react_jsx_runtime.JSX.Element;
+declare namespace ActionButtons {
+    var displayName: string;
+}
+
+interface WorkflowStatusCardProps extends Omit<AriaButtonProps, 'children'> {
+    icon: ReactNode;
+    workflowName: string;
+    status?: 'online' | 'idle' | 'busy' | 'offline';
+    statusText?: string;
+    className?: string;
+    onClick?: () => void;
+}
+declare function WorkflowStatusCard({ icon, workflowName, status, statusText, className, onClick, onPress, isDisabled, ...ariaProps }: WorkflowStatusCardProps): react_jsx_runtime.JSX.Element;
+declare namespace WorkflowStatusCard {
+    var displayName: string;
+}
+
+interface NavVerticalProps {
+    onBackClick?: () => void;
+    onHomeClick?: () => void;
+    folderGroupsSlot?: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+}
+declare function NavVertical({ onBackClick, onHomeClick, folderGroupsSlot, className, 'aria-label': ariaLabel, }: NavVerticalProps): react_jsx_runtime.JSX.Element;
+declare namespace NavVertical {
+    var displayName: string;
+}
+
+interface ActionLog {
+    id: string;
+    text: string;
+    timestamp: string;
+    icon?: React.ReactNode;
+    iconColor?: string;
+}
+interface RunItem {
+    id: string;
+    name: string;
+    status: 'completed' | 'running' | 'failed';
+    details: string;
+    category: 'scheduled' | 'completed' | 'issues';
+    icon?: 'bell' | 'file' | 'link' | 'chat' | 'warning';
+    logs?: ActionLog[];
+}
+interface PaneMenusProps {
+    activeTab?: 'runs' | 'usage' | 'connections';
+    onTabChange?: (tab: 'runs' | 'usage' | 'connections') => void;
+    runs?: RunItem[];
+    currentUsage?: number;
+    maxUsage?: number;
+    isGoogleConnected?: boolean;
+    onGoogleConnect?: () => void;
+    onGoogleDisconnect?: () => void;
+    onBrowseAutomations?: () => void;
+}
+declare function PaneMenus({ activeTab, onTabChange, runs, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, onBrowseAutomations, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
+
+type BrandType = 'Google' | 'Microsoft' | 'Slack' | 'YouTube';
+interface PaneSectionHeaderProps {
+    /**
+     * Brand logo to display in the center of the header
+     * @default 'Google'
+     */
+    brand?: BrandType;
+    /**
+     * Callback fired when back button is clicked
+     */
+    onBackClick?: () => void;
+    /**
+     * Callback fired when settings button is clicked
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Accessible label for the header
+     */
+    'aria-label'?: string;
+}
+/**
+ * PaneSectionHeader component
+ *
+ * A fixed-height header positioned at the top of the main pane section.
+ * Features a centered brand logo and a settings button in the top-right corner.
+ * Background includes responsive Rays2 pattern from the design system.
+ *
+ * @example
+ * ```tsx
+ * <PaneSectionHeader
+ *   brand="Google"
+ *   onSettingsClick={() => console.log('Settings clicked')}
+ * />
+ * ```
+ */
+declare function PaneSectionHeader({ brand, onBackClick, onSettingsClick, className, 'aria-label': ariaLabel, }: PaneSectionHeaderProps): react_jsx_runtime.JSX.Element;
+declare namespace PaneSectionHeader {
+    var displayName: string;
+}
+
+type ServiceBrand = 'Facebook' | 'Gmail' | 'Instagram' | 'LinkedIn' | 'Reddit' | 'Slack' | 'Telegram' | 'WhatsApp' | 'X' | 'YouTube';
+interface ServiceIconProps extends AriaButtonProps {
+    /**
+     * Brand logo to display
+     */
+    brand: ServiceBrand;
+    /**
+     * Whether the service icon is active/selected
+     */
+    active?: boolean;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+/**
+ * ServiceIcon component
+ *
+ * Displays a circular brand logo icon that can be used as a service selector.
+ * Uses colored brand logos from assets/icons/Brand and supports active/hover states.
+ *
+ * @example
+ * ```tsx
+ * <ServiceIcon
+ *   brand="Gmail"
+ *   active={true}
+ *   onPress={() => console.log('Gmail clicked')}
+ *   aria-label="Gmail service"
+ * />
+ * ```
+ */
+declare function ServiceIcon({ brand, active, className, ...ariaProps }: ServiceIconProps): react_jsx_runtime.JSX.Element;
+declare namespace ServiceIcon {
+    var displayName: string;
+}
+
+export { ActionButtons, type ActionButtonsProps, type BrandType, Icon, type IconName, IconNames, type IconProps, Layout, type LayoutProps, NavHorizontal, type NavHorizontalProps, NavVertical, type NavVerticalProps, PaneMenus, type PaneMenusProps, PaneSectionHeader, type PaneSectionHeaderProps, type ServiceBrand, ServiceIcon, type ServiceIconProps, WorkflowStatusCard, type WorkflowStatusCardProps };

package/dist/layout/index.js

@@ -0,0 +1,3 @@
+export { ActionButtons, Icon, IconNames, Layout, NavHorizontal, NavVertical, PaneMenus, PaneSectionHeader, ServiceIcon, WorkflowStatusCard } from '../chunk-MNXQDDWP.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/layout/index.js.map

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

package/dist/theme/index.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var chunkCVHHTWDQ_cjs = require('../chunk-CVHHTWDQ.cjs');
+
+
+
+Object.defineProperty(exports, "GlobalStyle", {
+  enumerable: true,
+  get: function () { return chunkCVHHTWDQ_cjs.GlobalStyle; }
+});
+Object.defineProperty(exports, "darkTheme", {
+  enumerable: true,
+  get: function () { return chunkCVHHTWDQ_cjs.darkTheme; }
+});
+Object.defineProperty(exports, "lightTheme", {
+  enumerable: true,
+  get: function () { return chunkCVHHTWDQ_cjs.lightTheme; }
+});
+Object.defineProperty(exports, "tokens", {
+  enumerable: true,
+  get: function () { return chunkCVHHTWDQ_cjs.tokens; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/theme/index.cjs.map

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

package/dist/theme/index.d.cts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import * as styled_components from 'styled-components';
+
+declare const darkTheme: {
+    name: string;
+    colors: {
+        primary: string;
+        surface: string;
+        text: string;
+        border: string;
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fonts: {
+        body: string;
+        mono: string;
+    };
+};
+
+declare const GlobalStyle: React.NamedExoticComponent<styled_components.ExecutionProps & object>;
+
+declare const lightTheme: {
+    name: string;
+    colors: {
+        primary: string;
+        surface: string;
+        text: string;
+        border: string;
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fonts: {
+        body: string;
+        mono: string;
+    };
+};
+
+declare const tokens: {
+    colors: {
+        primary: {
+            light: string;
+            dark: string;
+        };
+        surface: {
+            light: string;
+            dark: string;
+        };
+        text: {
+            light: string;
+            dark: string;
+        };
+        border: {
+            light: string;
+            dark: string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fonts: {
+        body: string;
+        mono: string;
+    };
+};
+
+export { GlobalStyle, darkTheme, lightTheme, tokens };

package/dist/theme/index.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import * as styled_components from 'styled-components';
+
+declare const darkTheme: {
+    name: string;
+    colors: {
+        primary: string;
+        surface: string;
+        text: string;
+        border: string;
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fonts: {
+        body: string;
+        mono: string;
+    };
+};
+
+declare const GlobalStyle: React.NamedExoticComponent<styled_components.ExecutionProps & object>;
+
+declare const lightTheme: {
+    name: string;
+    colors: {
+        primary: string;
+        surface: string;
+        text: string;
+        border: string;
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fonts: {
+        body: string;
+        mono: string;
+    };
+};
+
+declare const tokens: {
+    colors: {
+        primary: {
+            light: string;
+            dark: string;
+        };
+        surface: {
+            light: string;
+            dark: string;
+        };
+        text: {
+            light: string;
+            dark: string;
+        };
+        border: {
+            light: string;
+            dark: string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fonts: {
+        body: string;
+        mono: string;
+    };
+};
+
+export { GlobalStyle, darkTheme, lightTheme, tokens };

package/dist/theme/index.js

@@ -0,0 +1,3 @@
+export { GlobalStyle, darkTheme, lightTheme, tokens } from '../chunk-JQ6Q7MDQ.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

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