@agentiffai/design 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,185 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AriaTextFieldProps } from '@react-aria/textfield';
+import React__default from 'react';
+export { ActionButtons, ActionButtonsProps, BrandType, Icon, IconName, IconNames, IconProps, Layout, LayoutProps, NavHorizontal, NavHorizontalProps, NavVertical, NavVerticalProps, PaneMenus, PaneMenusProps, PaneSectionHeader, PaneSectionHeaderProps, ServiceBrand, ServiceIcon, ServiceIconProps, WorkflowStatusCard, WorkflowStatusCardProps } from './layout/index.js';
+import { AriaButtonProps } from '@react-aria/button';
+export { GlobalStyle, darkTheme, lightTheme, tokens } from './theme/index.js';
+export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, w as CopilotUserMessage, U as CopilotUserMessageProps, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as Suggestions, S as SuggestionsProps, z as Window, W as WindowProps } from './Window-B6e_UfLV.js';
+export { FacebookIcon, FacebookIconProps, FacebookIconVariant, GmailIcon, GmailIconProps, GmailIconVariant, InstagramIcon, InstagramIconProps, InstagramVariant, LinkedInIcon, LinkedInIconProps, LinkedInIconVariant, RedditIcon, RedditIconProps, RedditIconVariant, SlackIcon, SlackIconProps, SlackIconVariant, TelegramIcon, TelegramIconProps, TelegramIconVariant, WhatsAppIcon, WhatsAppIconProps, WhatsAppIconVariant, XIcon, XIconProps, XIconVariant, YouTubeIcon, YouTubeIconProps, YouTubeIconVariant } from './icons/index.js';
+import './index.d-DYU1eVeb.js';
+import 'styled-components';
+import 'styled-components/dist/types';
+
+interface AssistantThinkingProps {
+    message?: string;
+    className?: string;
+    ariaLabel?: string;
+}
+declare function AssistantThinking({ message, className, ariaLabel, }: AssistantThinkingProps): react_jsx_runtime.JSX.Element;
+declare namespace AssistantThinking {
+    var displayName: string;
+}
+
+interface Suggestion {
+    /** The text content of the suggestion */
+    text: string;
+}
+interface ChatInputProps extends Omit<AriaTextFieldProps, 'onChange'> {
+    /** Array of suggestion items to display above the input */
+    suggestions?: Suggestion[];
+    /** Callback when a suggestion is selected */
+    onSuggestionSelect?: (suggestion: string) => void;
+    /** Current message value */
+    value?: string;
+    /** Callback when message value changes */
+    onChange?: (value: string) => void;
+    /** Callback when message is submitted */
+    onSubmit?: (message: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    isDisabled?: boolean;
+    /** Whether the input is read-only */
+    isReadOnly?: boolean;
+    /** Whether to auto-focus the input */
+    autoFocus?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** ARIA label for the input */
+    'aria-label'?: string;
+}
+/**
+ * ChatInput component with minimal pill-shaped suggestion buttons
+ *
+ * Features:
+ * - Horizontal pill-shaped suggestion buttons with minimal design
+ * - Single-line input with submit button
+ * - React ARIA for accessibility
+ * - Keyboard navigation support
+ * - Clean, modern design matching vendor image
+ *
+ * @example
+ * ```tsx
+ * <ChatInput
+ *   suggestions={[
+ *     { text: "Create in-depth analysis" },
+ *     { text: "Identify actionable tasks" }
+ *   ]}
+ *   placeholder="Ask, write or search for anything..."
+ *   onSubmit={(message) => console.log(message)}
+ *   onSuggestionSelect={(suggestion) => console.log(suggestion)}
+ * />
+ * ```
+ */
+declare const ChatInput: React__default.FC<ChatInputProps>;
+
+interface NotificationItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** The text content of the notification */
+    text: string;
+    /** Optional icon (can be emoji, SVG, or icon component) */
+    icon?: React__default.ReactNode;
+    /** Icon background color (for colored icons like Slack, Google Sheets) */
+    iconColor?: string;
+    /** Whether this item is currently selected/active */
+    isSelected?: boolean;
+}
+interface NotificationSection {
+    /** Section title (e.g., "Today", "Yesterday") */
+    title: string;
+    /** Whether the section is initially collapsed */
+    isCollapsed?: boolean;
+    /** Array of notification items in this section */
+    items: NotificationItem[];
+}
+interface NotificationCardProps {
+    /** Array of notification sections */
+    sections: NotificationSection[];
+    /** Callback when an item is clicked */
+    onItemClick?: (item: NotificationItem) => void;
+    /** Currently selected item ID */
+    selectedItemId?: string;
+    /** Callback when menu button is clicked (three-dot menu) */
+    onMenuClick?: (item: NotificationItem) => void;
+    /** Additional CSS class name */
+    className?: string;
+    /** ARIA label for the notification card */
+    'aria-label'?: string;
+}
+/**
+ * NotificationCard component with collapsible sections
+ *
+ * Features:
+ * - Date-based sections with collapsible headers
+ * - Different item states (default, selected)
+ * - Icon variants (circle icon, colored app icons)
+ * - Three-dot menu on selected items
+ * - React ARIA for accessibility
+ * - Full keyboard navigation support
+ * - Clean design matching vendor image
+ *
+ * @example
+ * ```tsx
+ * <NotificationCard
+ *   sections={[
+ *     {
+ *       title: "Today",
+ *       items: [
+ *         { id: "1", text: "Help me write a professional email." },
+ *         { id: "2", text: "Write a letter to the work chat", icon: "💬", iconColor: "#4A90E2" }
+ *       ]
+ *     },
+ *     {
+ *       title: "Yesterday",
+ *       items: [
+ *         { id: "3", text: "Generate a 3D scene of robots", isSelected: true }
+ *       ]
+ *     }
+ *   ]}
+ *   selectedItemId="3"
+ *   onItemClick={(item) => console.log(item)}
+ *   onMenuClick={(item) => console.log("Menu clicked", item)}
+ * />
+ * ```
+ */
+declare const NotificationCard: React__default.FC<NotificationCardProps>;
+
+interface UserMessageProps extends AriaButtonProps {
+    /**
+     * The message text to display
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Whether the message is in a pressed state
+     */
+    isPressed?: boolean;
+    /**
+     * Optional click handler
+     */
+    onPress?: () => void;
+}
+/**
+ * UserMessage component - Displays a user message in a gradient pill
+ *
+ * This component renders a user message with a purple-to-blue gradient background,
+ * pill-shaped design with fully rounded ends, and white text. It uses React ARIA
+ * for accessibility and supports keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * <UserMessage onPress={() => console.log('clicked')}>
+ *   Can you export this as a CSV?
+ * </UserMessage>
+ * ```
+ */
+declare function UserMessage({ children, className, isPressed, onPress, ...ariaProps }: UserMessageProps): react_jsx_runtime.JSX.Element;
+declare namespace UserMessage {
+    var displayName: string;
+}
+
+export { AssistantThinking, type AssistantThinkingProps, ChatInput, type ChatInputProps, NotificationCard, type NotificationCardProps, UserMessage, type UserMessageProps };

package/dist/index.js

@@ -0,0 +1,358 @@
+export { FacebookIcon, GmailIcon, InstagramIcon, LinkedInIcon, RedditIcon, SlackIcon, TelegramIcon, WhatsAppIcon, XIcon, YouTubeIcon } from './chunk-PAOXD7DF.js';
+export { ActionButtons, Icon, IconNames, Layout, NavHorizontal, NavVertical, PaneMenus, PaneSectionHeader, ServiceIcon, WorkflowStatusCard } from './chunk-MNXQDDWP.js';
+export { Actions, AgentState, AssistantMessage, AssistantThinking, Button, ChatInput, UserMessage2 as CopilotUserMessage, FileAttachment, Footer, Header, Input, Messages, MessagesList, MessagesListContainer, MessagesListContent, Response, Suggestions, UserMessage, Window } from './chunk-CNVJ5UF2.js';
+export { GlobalStyle, darkTheme, lightTheme, tokens } from './chunk-JQ6Q7MDQ.js';
+import { useButton } from '@react-aria/button';
+import { useState, useRef } from 'react';
+import styled from 'styled-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var NotificationCardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+  padding: 20px;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  border-radius: 20px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  gap: 12px;
+`;
+var SectionHeader = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 4px;
+  border: none;
+  background: transparent;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+  color: #2c3e50;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: #1a252f;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #5b9fff;
+    outline-offset: 2px;
+    border-radius: 8px;
+  }
+`;
+var ChevronIcon = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+  color: #6c757d;
+
+  ${(props) => props.$isExpanded ? `
+    transform: rotate(0deg);
+  ` : `
+    transform: rotate(-90deg);
+  `}
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+var SectionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-left: 0;
+  margin-top: 4px;
+`;
+var NotificationItemWrapper = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: ${(props) => props.$isSelected ? "12px 16px" : "10px 12px"};
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.2s ease;
+  border-radius: ${(props) => props.$isSelected ? "12px" : "10px"};
+
+  /* Default state - transparent background */
+  background-color: ${(props) => props.$isSelected ? "#2c3e50" : "transparent"};
+
+  /* Hover state */
+  &:hover:not(:disabled) {
+    background-color: ${(props) => props.$isSelected ? "#1a252f" : "rgba(255, 255, 255, 0.5)"};
+  }
+
+  /* Active state */
+  &:active:not(:disabled) {
+    transform: scale(0.99);
+  }
+
+  /* Focus state */
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.$isSelected ? "#ffffff" : "#5b9fff"};
+    outline-offset: 2px;
+  }
+
+  /* Disabled state */
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+var ItemIcon = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  border-radius: ${(props) => props.$hasCustomIcon ? "6px" : "50%"};
+  background-color: ${(props) => props.$iconColor || "transparent"};
+  color: ${(props) => props.$hasCustomIcon ? "#ffffff" : "#6c757d"};
+  font-size: ${(props) => props.$hasCustomIcon ? "16px" : "14px"};
+
+  /* Default circle icon styling */
+  ${(props) => !props.$hasCustomIcon && `
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  `}
+
+  /* Custom icon (emoji or colored icon) styling */
+  ${(props) => props.$hasCustomIcon && `
+    padding: 2px;
+  `}
+`;
+var ItemText = styled.span`
+  flex: 1;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  font-weight: ${(props) => props.$isSelected ? "500" : "400"};
+  color: ${(props) => props.$isSelected ? "#ffffff" : "#5a5a5a"};
+  line-height: 1.5;
+  word-wrap: break-word;
+`;
+var MenuButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: #ffffff;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+
+  &:hover:not(:disabled) {
+    background-color: rgba(255, 255, 255, 0.15);
+  }
+
+  &:active:not(:disabled) {
+    background-color: rgba(255, 255, 255, 0.25);
+    transform: scale(0.95);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #ffffff;
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+var NotificationCard = ({
+  sections,
+  onItemClick,
+  selectedItemId,
+  onMenuClick,
+  className,
+  "aria-label": ariaLabel = "Notification history"
+}) => {
+  const [collapsedSections, setCollapsedSections] = useState(() => {
+    const initial = {};
+    for (const section of sections) {
+      initial[section.title] = section.isCollapsed || false;
+    }
+    return initial;
+  });
+  const toggleSection = (sectionTitle) => {
+    setCollapsedSections((prev) => ({
+      ...prev,
+      [sectionTitle]: !prev[sectionTitle]
+    }));
+  };
+  return /* @__PURE__ */ jsx(NotificationCardContainer, { className, "aria-label": ariaLabel, role: "region", children: sections.map((section) => /* @__PURE__ */ jsx(
+    SectionComponent,
+    {
+      section,
+      isCollapsed: collapsedSections[section.title] ?? false,
+      onToggle: () => toggleSection(section.title),
+      onItemClick,
+      selectedItemId,
+      onMenuClick
+    },
+    section.title
+  )) });
+};
+var SectionComponent = ({
+  section,
+  isCollapsed,
+  onToggle,
+  onItemClick,
+  selectedItemId,
+  onMenuClick
+}) => {
+  const headerRef = useRef(null);
+  const { buttonProps } = useButton(
+    {
+      onPress: onToggle,
+      "aria-label": `${section.title} section, ${isCollapsed ? "collapsed" : "expanded"}`,
+      "aria-expanded": !isCollapsed
+    },
+    headerRef
+  );
+  return /* @__PURE__ */ jsxs("section", { "aria-label": `${section.title} notifications`, children: [
+    /* @__PURE__ */ jsxs(SectionHeader, { ...buttonProps, ref: headerRef, children: [
+      section.title,
+      /* @__PURE__ */ jsx(ChevronIcon, { $isExpanded: !isCollapsed, "aria-hidden": "true", children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          role: "img",
+          "aria-label": "Expand/collapse icon",
+          children: [
+            /* @__PURE__ */ jsx("title", { children: "Expand/collapse icon" }),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M4 6L8 10L12 6",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      ) })
+    ] }),
+    !isCollapsed && /* @__PURE__ */ jsx(SectionContent, { role: "list", children: section.items.map((item) => /* @__PURE__ */ jsx(
+      NotificationItemComponent,
+      {
+        item,
+        isSelected: item.id === selectedItemId,
+        onItemClick,
+        onMenuClick
+      },
+      item.id
+    )) })
+  ] });
+};
+var NotificationItemComponent = ({
+  item,
+  isSelected,
+  onItemClick,
+  onMenuClick
+}) => {
+  const itemRef = useRef(null);
+  const menuRef = useRef(null);
+  const { buttonProps: itemButtonProps } = useButton(
+    {
+      onPress: () => onItemClick?.(item),
+      "aria-label": `Notification: ${item.text}`,
+      "aria-current": isSelected ? "true" : void 0
+    },
+    itemRef
+  );
+  const { buttonProps: menuButtonProps } = useButton(
+    {
+      onPress: () => onMenuClick?.(item),
+      "aria-label": `Options for ${item.text}`
+    },
+    menuRef
+  );
+  const handleItemKeyDown = (e) => {
+    if (isSelected && e.key === "Tab" && !e.shiftKey) {
+      return;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    NotificationItemWrapper,
+    {
+      ...itemButtonProps,
+      ref: itemRef,
+      $isSelected: isSelected,
+      $hasIcon: !!item.icon,
+      role: "listitem",
+      onKeyDown: handleItemKeyDown,
+      children: [
+        /* @__PURE__ */ jsx(ItemIcon, { $iconColor: item.iconColor, $hasCustomIcon: !!item.icon, children: item.icon || /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 20 20",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "2" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ItemText, { $isSelected: isSelected, children: item.text }),
+        isSelected && onMenuClick && /* @__PURE__ */ jsx(
+          MenuButton,
+          {
+            ...menuButtonProps,
+            ref: menuRef,
+            onClick: (e) => {
+              e.stopPropagation();
+              menuButtonProps.onClick?.(e);
+            },
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 20 20",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("title", { children: "More options" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "10", cy: "4", r: "1.5", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "10", cy: "16", r: "1.5", fill: "currentColor" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+NotificationCard.displayName = "NotificationCard";
+
+export { NotificationCard };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NotificationCard/NotificationCard.styles.ts","../src/components/NotificationCard/NotificationCard.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import styled from 'styled-components';\n\n/**\n * Main container for the notification card with light gradient background\n */\nexport const NotificationCardContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 600px;\n  padding: 20px;\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  border-radius: 20px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);\n  gap: 12px;\n`;\n\n/**\n * Section header button (collapsible)\n */\nexport const SectionHeader = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 8px 4px;\n  border: none;\n  background: transparent;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n  font-size: 16px;\n  font-weight: 700;\n  color: #2c3e50;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.2s ease;\n\n  &:hover {\n    color: #1a252f;\n  }\n\n  &:focus-visible {\n    outline: 2px solid #5b9fff;\n    outline-offset: 2px;\n    border-radius: 8px;\n  }\n`;\n\n/**\n * Chevron icon for section header with rotation animation\n */\ninterface ChevronIconProps {\n  $isExpanded: boolean;\n}\n\nexport const ChevronIcon = styled.span<ChevronIconProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n  color: #6c757d;\n\n  ${(props) =>\n    props.$isExpanded\n      ? `\n    transform: rotate(0deg);\n  `\n      : `\n    transform: rotate(-90deg);\n  `}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\n/**\n * Container for section content (list of notification items)\n */\nexport const SectionContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding-left: 0;\n  margin-top: 4px;\n`;\n\n/**\n * Individual notification item wrapper (button)\n */\ninterface NotificationItemWrapperProps {\n  $isSelected: boolean;\n  $hasIcon: boolean;\n}\n\nexport const NotificationItemWrapper = styled.button<NotificationItemWrapperProps>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  padding: ${(props) => (props.$isSelected ? '12px 16px' : '10px 12px')};\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  transition: all 0.2s ease;\n  border-radius: ${(props) => (props.$isSelected ? '12px' : '10px')};\n\n  /* Default state - transparent background */\n  background-color: ${(props) => (props.$isSelected ? '#2c3e50' : 'transparent')};\n\n  /* Hover state */\n  &:hover:not(:disabled) {\n    background-color: ${(props) => (props.$isSelected ? '#1a252f' : 'rgba(255, 255, 255, 0.5)')};\n  }\n\n  /* Active state */\n  &:active:not(:disabled) {\n    transform: scale(0.99);\n  }\n\n  /* Focus state */\n  &:focus-visible {\n    outline: 2px solid ${(props) => (props.$isSelected ? '#ffffff' : '#5b9fff')};\n    outline-offset: 2px;\n  }\n\n  /* Disabled state */\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n`;\n\n/**\n * Icon container for notification items\n */\ninterface ItemIconProps {\n  $iconColor?: string;\n  $hasCustomIcon: boolean;\n}\n\nexport const ItemIcon = styled.span<ItemIconProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  border-radius: ${(props) => (props.$hasCustomIcon ? '6px' : '50%')};\n  background-color: ${(props) => props.$iconColor || 'transparent'};\n  color: ${(props) => (props.$hasCustomIcon ? '#ffffff' : '#6c757d')};\n  font-size: ${(props) => (props.$hasCustomIcon ? '16px' : '14px')};\n\n  /* Default circle icon styling */\n  ${(props) =>\n    !props.$hasCustomIcon &&\n    `\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  `}\n\n  /* Custom icon (emoji or colored icon) styling */\n  ${(props) =>\n    props.$hasCustomIcon &&\n    `\n    padding: 2px;\n  `}\n`;\n\n/**\n * Text content for notification items\n */\ninterface ItemTextProps {\n  $isSelected: boolean;\n}\n\nexport const ItemText = styled.span<ItemTextProps>`\n  flex: 1;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n  font-size: 15px;\n  font-weight: ${(props) => (props.$isSelected ? '500' : '400')};\n  color: ${(props) => (props.$isSelected ? '#ffffff' : '#5a5a5a')};\n  line-height: 1.5;\n  word-wrap: break-word;\n`;\n\n/**\n * Three-dot menu button (shown on selected items)\n */\nexport const MenuButton = styled.button`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: 6px;\n  background-color: transparent;\n  color: #ffffff;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n\n  &:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  &:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.25);\n    transform: scale(0.95);\n  }\n\n  &:focus-visible {\n    outline: 2px solid #ffffff;\n    outline-offset: 2px;\n  }\n\n  svg {\n    width: 20px;\n    height: 20px;\n  }\n`;\n","import { useButton } from '@react-aria/button';\nimport React, { type KeyboardEvent, useRef, useState } from 'react';\nimport {\n  ChevronIcon,\n  ItemIcon,\n  ItemText,\n  MenuButton,\n  NotificationCardContainer,\n  NotificationItemWrapper,\n  SectionContent,\n  SectionHeader,\n} from './NotificationCard.styles';\n\nexport interface NotificationItem {\n  /** Unique identifier for the item */\n  id: string;\n  /** The text content of the notification */\n  text: string;\n  /** Optional icon (can be emoji, SVG, or icon component) */\n  icon?: React.ReactNode;\n  /** Icon background color (for colored icons like Slack, Google Sheets) */\n  iconColor?: string;\n  /** Whether this item is currently selected/active */\n  isSelected?: boolean;\n}\n\nexport interface NotificationSection {\n  /** Section title (e.g., \"Today\", \"Yesterday\") */\n  title: string;\n  /** Whether the section is initially collapsed */\n  isCollapsed?: boolean;\n  /** Array of notification items in this section */\n  items: NotificationItem[];\n}\n\nexport interface NotificationCardProps {\n  /** Array of notification sections */\n  sections: NotificationSection[];\n  /** Callback when an item is clicked */\n  onItemClick?: (item: NotificationItem) => void;\n  /** Currently selected item ID */\n  selectedItemId?: string;\n  /** Callback when menu button is clicked (three-dot menu) */\n  onMenuClick?: (item: NotificationItem) => void;\n  /** Additional CSS class name */\n  className?: string;\n  /** ARIA label for the notification card */\n  'aria-label'?: string;\n}\n\n/**\n * NotificationCard component with collapsible sections\n *\n * Features:\n * - Date-based sections with collapsible headers\n * - Different item states (default, selected)\n * - Icon variants (circle icon, colored app icons)\n * - Three-dot menu on selected items\n * - React ARIA for accessibility\n * - Full keyboard navigation support\n * - Clean design matching vendor image\n *\n * @example\n * ```tsx\n * <NotificationCard\n *   sections={[\n *     {\n *       title: \"Today\",\n *       items: [\n *         { id: \"1\", text: \"Help me write a professional email.\" },\n *         { id: \"2\", text: \"Write a letter to the work chat\", icon: \"💬\", iconColor: \"#4A90E2\" }\n *       ]\n *     },\n *     {\n *       title: \"Yesterday\",\n *       items: [\n *         { id: \"3\", text: \"Generate a 3D scene of robots\", isSelected: true }\n *       ]\n *     }\n *   ]}\n *   selectedItemId=\"3\"\n *   onItemClick={(item) => console.log(item)}\n *   onMenuClick={(item) => console.log(\"Menu clicked\", item)}\n * />\n * ```\n */\nexport const NotificationCard: React.FC<NotificationCardProps> = ({\n  sections,\n  onItemClick,\n  selectedItemId,\n  onMenuClick,\n  className,\n  'aria-label': ariaLabel = 'Notification history',\n}) => {\n  // Track collapsed state for each section\n  const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>(() => {\n    const initial: Record<string, boolean> = {};\n    for (const section of sections) {\n      initial[section.title] = section.isCollapsed || false;\n    }\n    return initial;\n  });\n\n  const toggleSection = (sectionTitle: string) => {\n    setCollapsedSections((prev) => ({\n      ...prev,\n      [sectionTitle]: !prev[sectionTitle],\n    }));\n  };\n\n  return (\n    <NotificationCardContainer className={className} aria-label={ariaLabel} role=\"region\">\n      {sections.map((section) => (\n        <SectionComponent\n          key={section.title}\n          section={section}\n          isCollapsed={collapsedSections[section.title] ?? false}\n          onToggle={() => toggleSection(section.title)}\n          onItemClick={onItemClick}\n          selectedItemId={selectedItemId}\n          onMenuClick={onMenuClick}\n        />\n      ))}\n    </NotificationCardContainer>\n  );\n};\n\n/**\n * Individual section component with collapsible header\n */\ninterface SectionComponentProps {\n  section: NotificationSection;\n  isCollapsed: boolean;\n  onToggle: () => void;\n  onItemClick?: (item: NotificationItem) => void;\n  selectedItemId?: string;\n  onMenuClick?: (item: NotificationItem) => void;\n}\n\nconst SectionComponent: React.FC<SectionComponentProps> = ({\n  section,\n  isCollapsed,\n  onToggle,\n  onItemClick,\n  selectedItemId,\n  onMenuClick,\n}) => {\n  const headerRef = useRef<HTMLButtonElement>(null);\n  const { buttonProps } = useButton(\n    {\n      onPress: onToggle,\n      'aria-label': `${section.title} section, ${isCollapsed ? 'collapsed' : 'expanded'}`,\n      'aria-expanded': !isCollapsed,\n    },\n    headerRef\n  );\n\n  return (\n    <section aria-label={`${section.title} notifications`}>\n      <SectionHeader {...buttonProps} ref={headerRef}>\n        {section.title}\n        <ChevronIcon $isExpanded={!isCollapsed} aria-hidden=\"true\">\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            role=\"img\"\n            aria-label=\"Expand/collapse icon\"\n          >\n            <title>Expand/collapse icon</title>\n            <path\n              d=\"M4 6L8 10L12 6\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </ChevronIcon>\n      </SectionHeader>\n\n      {!isCollapsed && (\n        <SectionContent role=\"list\">\n          {section.items.map((item) => (\n            <NotificationItemComponent\n              key={item.id}\n              item={item}\n              isSelected={item.id === selectedItemId}\n              onItemClick={onItemClick}\n              onMenuClick={onMenuClick}\n            />\n          ))}\n        </SectionContent>\n      )}\n    </section>\n  );\n};\n\n/**\n * Individual notification item component\n */\ninterface NotificationItemComponentProps {\n  item: NotificationItem;\n  isSelected: boolean;\n  onItemClick?: (item: NotificationItem) => void;\n  onMenuClick?: (item: NotificationItem) => void;\n}\n\nconst NotificationItemComponent: React.FC<NotificationItemComponentProps> = ({\n  item,\n  isSelected,\n  onItemClick,\n  onMenuClick,\n}) => {\n  const itemRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLButtonElement>(null);\n\n  const { buttonProps: itemButtonProps } = useButton(\n    {\n      onPress: () => onItemClick?.(item),\n      'aria-label': `Notification: ${item.text}`,\n      'aria-current': isSelected ? 'true' : undefined,\n    },\n    itemRef\n  );\n\n  const { buttonProps: menuButtonProps } = useButton(\n    {\n      onPress: () => onMenuClick?.(item),\n      'aria-label': `Options for ${item.text}`,\n    },\n    menuRef\n  );\n\n  // Handle keyboard navigation between item and menu button\n  const handleItemKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (isSelected && e.key === 'Tab' && !e.shiftKey) {\n      // Allow natural tab to menu button\n      return;\n    }\n  };\n\n  return (\n    <NotificationItemWrapper\n      {...itemButtonProps}\n      ref={itemRef}\n      $isSelected={isSelected}\n      $hasIcon={!!item.icon}\n      role=\"listitem\"\n      onKeyDown={handleItemKeyDown}\n    >\n      <ItemIcon $iconColor={item.iconColor} $hasCustomIcon={!!item.icon}>\n        {item.icon || (\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <circle cx=\"10\" cy=\"10\" r=\"8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n          </svg>\n        )}\n      </ItemIcon>\n      <ItemText $isSelected={isSelected}>{item.text}</ItemText>\n      {isSelected && onMenuClick && (\n        <MenuButton\n          {...menuButtonProps}\n          ref={menuRef}\n          onClick={(e) => {\n            e.stopPropagation();\n            menuButtonProps.onClick?.(e);\n          }}\n        >\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <title>More options</title>\n            <circle cx=\"10\" cy=\"4\" r=\"1.5\" fill=\"currentColor\" />\n            <circle cx=\"10\" cy=\"10\" r=\"1.5\" fill=\"currentColor\" />\n            <circle cx=\"10\" cy=\"16\" r=\"1.5\" fill=\"currentColor\" />\n          </svg>\n        </MenuButton>\n      )}\n    </NotificationItemWrapper>\n  );\n};\n\nNotificationCard.displayName = 'NotificationCard';\n"]}

package/dist/layout/index.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var chunkKNSPBTTJ_cjs = require('../chunk-KNSPBTTJ.cjs');
+
+
+
+Object.defineProperty(exports, "ActionButtons", {
+  enumerable: true,
+  get: function () { return chunkKNSPBTTJ_cjs.ActionButtons; }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () { return chunkKNSPBTTJ_cjs.Icon; }
+});
+Object.defineProperty(exports, "IconNames", {
+  enumerable: true,
+  get: function () { return chunkKNSPBTTJ_cjs.IconNames; }
+});
+Object.defineProperty(exports, "Layout", {
+  enumerable: true,
+  get: function () { return chunkKNSPBTTJ_cjs.Layout; }
+});
+Object.defineProperty(exports, "NavHorizontal", {
+  enumerable: true,
+  get: function () { return chunkKNSPBTTJ_cjs.NavHorizontal; }
+});
+Object.defineProperty(exports, "NavVertical", {
+  enumerable: true,
+  get: function () { return chunkKNSPBTTJ_cjs.NavVertical; }
+});
+Object.defineProperty(exports, "PaneMenus", {
+  enumerable: true,
+  get: function () { return chunkKNSPBTTJ_cjs.PaneMenus; }
+});
+Object.defineProperty(exports, "PaneSectionHeader", {
+  enumerable: true,
+  get: function () { return chunkKNSPBTTJ_cjs.PaneSectionHeader; }
+});
+Object.defineProperty(exports, "ServiceIcon", {
+  enumerable: true,
+  get: function () { return chunkKNSPBTTJ_cjs.ServiceIcon; }
+});
+Object.defineProperty(exports, "WorkflowStatusCard", {
+  enumerable: true,
+  get: function () { return chunkKNSPBTTJ_cjs.WorkflowStatusCard; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/layout/index.cjs.map

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