@camtomlabs/malix-design-system 0.1.3 → 0.1.4

package/README.md

@@ -1,38 +1,169 @@
 # @camtomlabs/malix-design-system
 
-Malix Design System combined package.
+Malix Design System — a React component library by [Camtom Labs](https://camtomx.com). Ships pre-built with full TypeScript types, design tokens, and ready-to-use CSS.
 
-## Install
+## Installation
 
 ```bash
 npm install @camtomlabs/malix-design-system
+# or
+pnpm add @camtomlabs/malix-design-system
+# or
+yarn add @camtomlabs/malix-design-system
 ```
 
-## Usage
+**Peer dependencies** — make sure your project has these installed:
+
+```bash
+npm install react react-dom
+```
 
-Import the bundled styles once:
+## Setup
+
+Import the bundled stylesheet once in your app's entry point (e.g. `main.tsx`, `layout.tsx`, or `_app.tsx`):
 
 ```ts
 import '@camtomlabs/malix-design-system/styles.css';
 ```
 
-Import components from the combined entrypoint:
+That's it. All components are styled and ready to use.
+
+## Usage
 
 ```tsx
 import { Button, Input, Card } from '@camtomlabs/malix-design-system';
+
+export function MyPage() {
+  return (
+    <Card>
+      <Input placeholder="Enter your email" />
+      <Button hierarchy="primary">Continue</Button>
+    </Card>
+  );
+}
 ```
 
-You can also read the token registry:
+## Design Tokens
+
+Malix uses a CSS custom-property token system for colors, spacing, typography, and radius. You can also import the tokens stylesheet separately:
+
+```ts
+import '@camtomlabs/malix-design-system/tokens.css';
+```
+
+Or access the token registry programmatically:
 
 ```ts
 import { tokenRegistry } from '@camtomlabs/malix-design-system';
 ```
 
-## Note
+## Components
+
+### Atoms
+| Component | Description |
+|-----------|-------------|
+| `Avatar` | User avatar with image or initials fallback |
+| `Badge` | Status or count indicator |
+| `Divider` | Horizontal or vertical separator |
+| `Pill` | Compact label/tag element |
+| `StatusDot` | Small colored status indicator |
+
+### Buttons
+| Component | Description |
+|-----------|-------------|
+| `Button` | Primary action button with hierarchy and variant props |
+
+### Form Inputs
+| Component | Description |
+|-----------|-------------|
+| `Checkbox` | Checkbox input with label |
+| `DateInput` | Date picker input |
+| `Input` | Text input field |
+| `InputGroup` | Grouped inputs with shared label/error |
+| `Radio` | Radio button input |
+| `SearchInput` | Input with built-in search icon |
+| `Select` | Dropdown select |
+| `SelectGroup` | Grouped select options |
+| `Textarea` | Multi-line text input |
+| `Toggle` | On/off toggle switch |
+
+### Navigation
+| Component | Description |
+|-----------|-------------|
+| `Breadcrumb` | Breadcrumb trail navigation |
+| `FilterTabs` | Horizontal tab filters |
+| `FlyoutMenu` | Flyout dropdown navigation menu |
+| `Header` | Top-level app header |
+| `SidebarItem` | Individual sidebar navigation item |
+| `SidebarPanel` | Full sidebar navigation panel |
+| `TabBar` | Tab bar with multiple items |
+
+### Layout
+| Component | Description |
+|-----------|-------------|
+| `Card` | Surface container with elevation levels |
+| `SectionHeader` | Page section heading with optional action |
+| `SplitPane` | Resizable two-panel layout |
+
+### Data Display
+| Component | Description |
+|-----------|-------------|
+| `DataTable` | Sortable data table with columns/rows |
+| `FileCard` | File attachment preview card |
+| `Pagination` | Page navigation controls |
+| `StatCard` | Metric card with change indicator |
+| `Stepper` | Multi-step progress tracker |
+
+### Feedback
+| Component | Description |
+|-----------|-------------|
+| `Banner` | Full-width informational banner |
+| `EmptyState` | Placeholder for empty content areas |
+| `OperationStatus` | Async operation status display |
+| `ProgressBar` | Linear progress indicator |
+| `Tooltip` | Contextual hover tooltip |
+| `ValidationAlert` | Inline form validation message |
+
+### Overlays
+| Component | Description |
+|-----------|-------------|
+| `GlassPopover` | Glassmorphism-styled popover |
+| `Modal` | Full-screen modal dialog |
+| `OnboardingPopover` | Guided onboarding popover |
+| `Overlay` | Backdrop overlay layer |
+
+### Interactive / Composite
+| Component | Description |
+|-----------|-------------|
+| `Accordion` | Collapsible content sections |
+| `ChatInput` | Rich chat message input |
+| `CreditsIndicator` | Usage credits display |
+| `Dropzone` | File drag-and-drop upload area |
+| `LanguageSelector` | Locale/language switcher |
+| `PricingCard` | Subscription plan pricing card |
+| `SegmentedControl` | Multi-option segmented selector |
+| `SelectionCard` | Selectable card option |
+| `UserProfilePopover` | User profile menu popover |
+| `ChatBubble` | AI/user message bubble for chat UIs |
+| `AIAssistantPanel` | Full AI chat panel with messages and input |
+
+## TypeScript
+
+All components ship with TypeScript declarations. Named types are also exported for use in your own code:
+
+```ts
+import type { ButtonProps, ButtonHierarchy, ButtonVariant } from '@camtomlabs/malix-design-system';
+```
+
+## Package Exports
 
-This package publishes raw TypeScript source. Configure your bundler to transpile the package in
-frameworks like Next.js.
+| Import path | Description |
+|-------------|-------------|
+| `@camtomlabs/malix-design-system` | All components and types |
+| `@camtomlabs/malix-design-system/styles.css` | Full component stylesheet |
+| `@camtomlabs/malix-design-system/tokens.css` | Design tokens only |
+| `@camtomlabs/malix-design-system/tokens.registry.json` | Token registry JSON |
 
 ## License
 
-`UNLICENSED`
+MIT © [Camtom Labs](https://camtomx.com)

package/dist/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AIAssistantPanel: () => AIAssistantPanel,
   Accordion: () => Accordion,
   Avatar: () => Avatar,
   Badge: () => Badge,
@@ -37,6 +38,7 @@ __export(index_exports, {
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
   Card: () => Card,
+  ChatBubble: () => ChatBubble,
   ChatInput: () => ChatInput,
   Checkbox: () => Checkbox,
   CreditsIndicator: () => CreditsIndicator,
@@ -2282,8 +2284,123 @@ function UserProfilePopover({
     }
   );
 }
+
+// src/components/ChatBubble.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function ChatBubble({
+  variant,
+  message,
+  avatarInitials,
+  children,
+  className
+}) {
+  const content = children ?? message;
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    "div",
+    {
+      className: `malix-chat-bubble-row${className ? ` ${className}` : ""}`,
+      "data-variant": variant,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "malix-chat-bubble", "data-variant": variant, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-chat-bubble__text", children: content }) }),
+        variant === "user" && avatarInitials ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-chat-bubble__avatar", children: avatarInitials }) : null
+      ]
+    }
+  );
+}
+
+// src/components/AIAssistantPanel.tsx
+var import_react13 = require("react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+function AIAssistantPanel({
+  title = "AI Assistant",
+  messages,
+  onSend,
+  onClose,
+  placeholder = "Ask the AI assistant...",
+  userInitials,
+  disabled,
+  className
+}) {
+  const [draft, setDraft] = (0, import_react13.useState)("");
+  const bodyRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
+    if (bodyRef.current) {
+      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
+    }
+  }, [messages]);
+  const handleSend = () => {
+    const text = draft.trim();
+    if (!text) return;
+    onSend(text);
+    setDraft("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && draft.trim()) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: `malix-ai-panel${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "malix-ai-panel__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "malix-ai-panel__logo", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "malix-ai-panel__title", children: title }),
+      onClose ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "malix-ai-panel__close",
+          onClick: onClose,
+          "aria-label": "Close assistant",
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M18 6 6 18" }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "m6 6 12 12" })
+          ] })
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "malix-ai-panel__body", ref: bodyRef, children: messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      ChatBubble,
+      {
+        variant: msg.variant,
+        message: msg.content,
+        avatarInitials: msg.variant === "user" ? userInitials : void 0
+      },
+      msg.id
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "malix-ai-panel__footer", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "malix-ai-panel__input-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        "input",
+        {
+          type: "text",
+          className: "malix-ai-panel__input",
+          value: draft,
+          onChange: (e) => setDraft(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder,
+          disabled,
+          "aria-label": placeholder
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "malix-ai-panel__send",
+          onClick: handleSend,
+          disabled: disabled || !draft.trim(),
+          "aria-label": "Send message",
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M12 19V5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "m5 12 7-7 7 7" })
+          ] })
+        }
+      )
+    ] }) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AIAssistantPanel,
   Accordion,
   Avatar,
   Badge,
@@ -2291,6 +2408,7 @@ function UserProfilePopover({
   Breadcrumb,
   Button,
   Card,
+  ChatBubble,
   ChatInput,
   Checkbox,
   CreditsIndicator,

package/dist/index.d.cts

@@ -521,4 +521,42 @@ type UserProfilePopoverProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function UserProfilePopover({ name, email, avatar, menuItems, onLogout, credits, className, ...props }: UserProfilePopoverProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonVariant, Card, type CardLevel, type CardProps, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry };
+type ChatBubbleVariant = 'ai' | 'user';
+type ChatBubbleProps = {
+    /** Which side of the conversation this bubble represents. */
+    variant: ChatBubbleVariant;
+    /** Text content of the message. */
+    message?: string;
+    /** Optional user initials shown as avatar next to user messages. */
+    avatarInitials?: string;
+    /** Override content via children instead of message prop. */
+    children?: React.ReactNode;
+    className?: string;
+};
+declare function ChatBubble({ variant, message, avatarInitials, children, className, }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
+
+type AIAssistantMessage = {
+    id: string;
+    variant: 'ai' | 'user';
+    content: string;
+};
+type AIAssistantPanelProps = {
+    /** Title shown in the header. */
+    title?: string;
+    /** Conversation messages. */
+    messages: AIAssistantMessage[];
+    /** Called when the user sends a new message. */
+    onSend: (message: string) => void;
+    /** Called when the close button is pressed. */
+    onClose?: () => void;
+    /** Placeholder text for the input field. */
+    placeholder?: string;
+    /** User initials shown next to user messages. */
+    userInitials?: string;
+    /** Disable input and send button. */
+    disabled?: boolean;
+    className?: string;
+};
+declare function AIAssistantPanel({ title, messages, onSend, onClose, placeholder, userInitials, disabled, className, }: AIAssistantPanelProps): react_jsx_runtime.JSX.Element;
+
+export { type AIAssistantMessage, AIAssistantPanel, type AIAssistantPanelProps, Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry };

package/dist/index.d.ts

@@ -521,4 +521,42 @@ type UserProfilePopoverProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function UserProfilePopover({ name, email, avatar, menuItems, onLogout, credits, className, ...props }: UserProfilePopoverProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonVariant, Card, type CardLevel, type CardProps, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry };
+type ChatBubbleVariant = 'ai' | 'user';
+type ChatBubbleProps = {
+    /** Which side of the conversation this bubble represents. */
+    variant: ChatBubbleVariant;
+    /** Text content of the message. */
+    message?: string;
+    /** Optional user initials shown as avatar next to user messages. */
+    avatarInitials?: string;
+    /** Override content via children instead of message prop. */
+    children?: React.ReactNode;
+    className?: string;
+};
+declare function ChatBubble({ variant, message, avatarInitials, children, className, }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
+
+type AIAssistantMessage = {
+    id: string;
+    variant: 'ai' | 'user';
+    content: string;
+};
+type AIAssistantPanelProps = {
+    /** Title shown in the header. */
+    title?: string;
+    /** Conversation messages. */
+    messages: AIAssistantMessage[];
+    /** Called when the user sends a new message. */
+    onSend: (message: string) => void;
+    /** Called when the close button is pressed. */
+    onClose?: () => void;
+    /** Placeholder text for the input field. */
+    placeholder?: string;
+    /** User initials shown next to user messages. */
+    userInitials?: string;
+    /** Disable input and send button. */
+    disabled?: boolean;
+    className?: string;
+};
+declare function AIAssistantPanel({ title, messages, onSend, onClose, placeholder, userInitials, disabled, className, }: AIAssistantPanelProps): react_jsx_runtime.JSX.Element;
+
+export { type AIAssistantMessage, AIAssistantPanel, type AIAssistantPanelProps, Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry };

package/dist/index.js

@@ -2196,7 +2196,122 @@ function UserProfilePopover({
     }
   );
 }
+
+// src/components/ChatBubble.tsx
+import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+function ChatBubble({
+  variant,
+  message,
+  avatarInitials,
+  children,
+  className
+}) {
+  const content = children ?? message;
+  return /* @__PURE__ */ jsxs45(
+    "div",
+    {
+      className: `malix-chat-bubble-row${className ? ` ${className}` : ""}`,
+      "data-variant": variant,
+      children: [
+        /* @__PURE__ */ jsx50("div", { className: "malix-chat-bubble", "data-variant": variant, children: /* @__PURE__ */ jsx50("span", { className: "malix-chat-bubble__text", children: content }) }),
+        variant === "user" && avatarInitials ? /* @__PURE__ */ jsx50("span", { className: "malix-chat-bubble__avatar", children: avatarInitials }) : null
+      ]
+    }
+  );
+}
+
+// src/components/AIAssistantPanel.tsx
+import { useState as useState6, useRef as useRef5, useEffect as useEffect4 } from "react";
+import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
+function AIAssistantPanel({
+  title = "AI Assistant",
+  messages,
+  onSend,
+  onClose,
+  placeholder = "Ask the AI assistant...",
+  userInitials,
+  disabled,
+  className
+}) {
+  const [draft, setDraft] = useState6("");
+  const bodyRef = useRef5(null);
+  useEffect4(() => {
+    if (bodyRef.current) {
+      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
+    }
+  }, [messages]);
+  const handleSend = () => {
+    const text = draft.trim();
+    if (!text) return;
+    onSend(text);
+    setDraft("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && draft.trim()) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  return /* @__PURE__ */ jsxs46("div", { className: `malix-ai-panel${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsxs46("div", { className: "malix-ai-panel__header", children: [
+      /* @__PURE__ */ jsx51("span", { className: "malix-ai-panel__logo", children: /* @__PURE__ */ jsx51("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx51("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }) }) }),
+      /* @__PURE__ */ jsx51("span", { className: "malix-ai-panel__title", children: title }),
+      onClose ? /* @__PURE__ */ jsx51(
+        "button",
+        {
+          type: "button",
+          className: "malix-ai-panel__close",
+          onClick: onClose,
+          "aria-label": "Close assistant",
+          children: /* @__PURE__ */ jsxs46("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx51("path", { d: "M18 6 6 18" }),
+            /* @__PURE__ */ jsx51("path", { d: "m6 6 12 12" })
+          ] })
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx51("div", { className: "malix-ai-panel__body", ref: bodyRef, children: messages.map((msg) => /* @__PURE__ */ jsx51(
+      ChatBubble,
+      {
+        variant: msg.variant,
+        message: msg.content,
+        avatarInitials: msg.variant === "user" ? userInitials : void 0
+      },
+      msg.id
+    )) }),
+    /* @__PURE__ */ jsx51("div", { className: "malix-ai-panel__footer", children: /* @__PURE__ */ jsxs46("div", { className: "malix-ai-panel__input-row", children: [
+      /* @__PURE__ */ jsx51(
+        "input",
+        {
+          type: "text",
+          className: "malix-ai-panel__input",
+          value: draft,
+          onChange: (e) => setDraft(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder,
+          disabled,
+          "aria-label": placeholder
+        }
+      ),
+      /* @__PURE__ */ jsx51(
+        "button",
+        {
+          type: "button",
+          className: "malix-ai-panel__send",
+          onClick: handleSend,
+          disabled: disabled || !draft.trim(),
+          "aria-label": "Send message",
+          children: /* @__PURE__ */ jsxs46("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx51("path", { d: "M12 19V5" }),
+            /* @__PURE__ */ jsx51("path", { d: "m5 12 7-7 7 7" })
+          ] })
+        }
+      )
+    ] }) })
+  ] });
+}
 export {
+  AIAssistantPanel,
   Accordion,
   Avatar,
   Badge,
@@ -2204,6 +2319,7 @@ export {
   Breadcrumb,
   Button,
   Card,
+  ChatBubble,
   ChatInput,
   Checkbox,
   CreditsIndicator,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camtomlabs/malix-design-system",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Malix Design System combined package with components, tokens, and bundled styles.",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/styles.css

@@ -3235,3 +3235,189 @@ a.malix-breadcrumb__label:hover {
   height: 16px;
   flex-shrink: 0;
 }
+
+/* ═══════════════════════════════════════════════
+   CHAT BUBBLE — Pencil: gNrQK, dqzNT
+   AI: surface-secondary bg, foreground text
+   User: cta-primary bg, primary-foreground text
+   ═══════════════════════════════════════════════ */
+
+.malix-chat-bubble-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--malix-space-sm);
+  width: 100%;
+}
+
+.malix-chat-bubble-row[data-variant="user"] {
+  justify-content: flex-end;
+}
+
+.malix-chat-bubble {
+  padding: 10px 14px;
+  font-family: var(--malix-font-body);
+  font-size: var(--malix-text-sm);
+  font-weight: var(--malix-weight-normal);
+  line-height: 1.45;
+  max-width: 280px;
+  word-wrap: break-word;
+}
+
+.malix-chat-bubble[data-variant="ai"] {
+  background: var(--malix-surface-secondary);
+  color: var(--malix-foreground);
+  border-radius: 8px 8px 8px 2px;
+}
+
+.malix-chat-bubble[data-variant="user"] {
+  background: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-foreground);
+  border-radius: 8px 8px 2px 8px;
+}
+
+.malix-chat-bubble__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  border-radius: 50%;
+  background: var(--malix-background-main);
+  border: 1px solid var(--malix-border);
+  font-family: var(--malix-font-body);
+  font-size: var(--malix-text-xs);
+  font-weight: var(--malix-weight-semibold);
+  color: var(--malix-foreground-secondary);
+}
+
+/* ═══════════════════════════════════════════════
+   AI ASSISTANT PANEL — Pencil: MtZxU
+   380×500 panel, border+radius-lg, vertical flex
+   ═══════════════════════════════════════════════ */
+
+.malix-ai-panel {
+  display: flex;
+  flex-direction: column;
+  width: 380px;
+  height: 500px;
+  border-radius: var(--malix-radius-lg);
+  background: var(--malix-background-main);
+  border: 1px solid var(--malix-border);
+  overflow: hidden;
+  font-family: var(--malix-font-body);
+}
+
+/* Header */
+.malix-ai-panel__header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--malix-border);
+}
+
+.malix-ai-panel__logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  border-radius: var(--malix-radius-pill);
+  background: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-foreground);
+}
+
+.malix-ai-panel__title {
+  font-size: var(--malix-text-base);
+  font-weight: var(--malix-weight-semibold);
+  color: var(--malix-foreground);
+  flex: 1;
+}
+
+.malix-ai-panel__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--malix-foreground-secondary);
+  transition: color 120ms ease;
+}
+
+.malix-ai-panel__close:hover {
+  color: var(--malix-foreground);
+}
+
+/* Body */
+.malix-ai-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--malix-space-md);
+}
+
+/* Footer */
+.malix-ai-panel__footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--malix-border);
+}
+
+.malix-ai-panel__input-row {
+  display: flex;
+  align-items: center;
+  gap: var(--malix-space-sm);
+  padding: 10px 12px 10px 16px;
+  border-radius: var(--malix-radius-lg);
+  border: 1px solid var(--malix-border);
+  background: var(--malix-background-main);
+  transition: border-color 120ms ease;
+}
+
+.malix-ai-panel__input-row:focus-within {
+  border-color: var(--malix-border-focus);
+}
+
+.malix-ai-panel__input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--malix-font-body);
+  font-size: var(--malix-text-base);
+  color: var(--malix-foreground);
+  padding: 0;
+}
+
+.malix-ai-panel__input::placeholder {
+  color: var(--malix-foreground-tertiary);
+}
+
+.malix-ai-panel__send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: var(--malix-radius-md);
+  background: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-foreground);
+  border: none;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.malix-ai-panel__send:hover:not(:disabled) {
+  background: var(--malix-primary-hover);
+}
+
+.malix-ai-panel__send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}