@camtomlabs/malix-design-system 0.1.2

package/src/components/UserProfilePopover.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+
+export type UserProfileMenuItem = {
+  icon?: React.ReactNode;
+  label: string;
+  onClick?: () => void;
+};
+
+export type UserProfilePopoverProps = React.HTMLAttributes<HTMLDivElement> & {
+  name: string;
+  email: string;
+  avatar?: React.ReactNode;
+  menuItems?: UserProfileMenuItem[];
+  onLogout?: () => void;
+  credits?: number;
+};
+
+export function UserProfilePopover({
+  name,
+  email,
+  avatar,
+  menuItems,
+  onLogout,
+  credits,
+  className,
+  ...props
+}: UserProfilePopoverProps) {
+  return (
+    <div
+      className={`malix-user-profile${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      <div className="malix-user-profile__header">
+        {avatar ? (
+          <span className="malix-user-profile__avatar">{avatar}</span>
+        ) : null}
+        <div className="malix-user-profile__info">
+          <span className="malix-user-profile__name">{name}</span>
+          <span className="malix-user-profile__email">{email}</span>
+        </div>
+      </div>
+
+      {credits !== undefined ? (
+        <div className="malix-user-profile__credits">
+          <span className="malix-user-profile__credits-label">Credits</span>
+          <span className="malix-user-profile__credits-value">{credits}</span>
+        </div>
+      ) : null}
+
+      {menuItems && menuItems.length > 0 ? (
+        <>
+          <hr className="malix-user-profile__divider" />
+          <nav className="malix-user-profile__menu" role="menu">
+            {menuItems.map((item, i) => (
+              <button
+                key={i}
+                type="button"
+                className="malix-user-profile__menu-item"
+                role="menuitem"
+                onClick={item.onClick}
+              >
+                {item.icon ? (
+                  <span className="malix-user-profile__menu-item-icon">{item.icon}</span>
+                ) : null}
+                <span className="malix-user-profile__menu-item-label">{item.label}</span>
+              </button>
+            ))}
+          </nav>
+        </>
+      ) : null}
+
+      {onLogout ? (
+        <>
+          <hr className="malix-user-profile__divider" />
+          <button
+            type="button"
+            className="malix-user-profile__logout"
+            onClick={onLogout}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+              <polyline points="16 17 21 12 16 7" />
+              <line x1="21" y1="12" x2="9" y2="12" />
+            </svg>
+            <span>Log out</span>
+          </button>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/src/components/ValidationAlert.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+export type ValidationAlertVariant = 'error' | 'warning' | 'info';
+
+export type ValidationAlertProps = {
+  title: string;
+  message: string;
+  onClose?: () => void;
+  variant?: ValidationAlertVariant;
+  className?: string;
+};
+
+function AlertIcon({ variant }: { variant: ValidationAlertVariant }) {
+  const shared = { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
+
+  switch (variant) {
+    case 'error':
+    case 'warning':
+      return (
+        <svg {...shared}>
+          <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
+          <line x1="12" y1="9" x2="12" y2="13" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+        </svg>
+      );
+    case 'info':
+      return (
+        <svg {...shared}>
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="16" x2="12" y2="12" />
+          <line x1="12" y1="8" x2="12.01" y2="8" />
+        </svg>
+      );
+  }
+}
+
+export function ValidationAlert({
+  title,
+  message,
+  onClose,
+  variant = 'error',
+  className,
+}: ValidationAlertProps) {
+  return (
+    <div
+      className={`malix-validation-alert${className ? ` ${className}` : ''}`}
+      data-variant={variant}
+      role="alert"
+    >
+      <span className="malix-validation-alert__icon">
+        <AlertIcon variant={variant} />
+      </span>
+      <div className="malix-validation-alert__content">
+        <span className="malix-validation-alert__title">{title}</span>
+        <span className="malix-validation-alert__message">{message}</span>
+      </div>
+      {onClose ? (
+        <button
+          type="button"
+          className="malix-validation-alert__close"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,177 @@
+export { default as tokenRegistry } from './tokens.registry.json' with { type: 'json' };
+
+// Atoms
+export { Divider } from './components/Divider';
+export type { DividerProps } from './components/Divider';
+export { Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+export { Pill } from './components/Pill';
+export type { PillProps, PillVariant } from './components/Pill';
+
+// Button
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonHierarchy, ButtonVariant } from './components/Button';
+
+// Inputs
+export { Input, SearchInput } from './components/Input';
+export type { InputProps } from './components/Input';
+export { InputGroup } from './components/InputGroup';
+export type { InputGroupProps } from './components/InputGroup';
+
+// Feedback
+export { Tooltip } from './components/Tooltip';
+export type { TooltipProps, TooltipPlacement } from './components/Tooltip';
+
+// Navigation
+export { SidebarItem } from './components/SidebarItem';
+export type { SidebarItemProps } from './components/SidebarItem';
+export { FlyoutMenu } from './components/FlyoutMenu';
+export type { FlyoutMenuProps, FlyoutMenuItem } from './components/FlyoutMenu';
+export { SidebarPanel } from './components/SidebarPanel';
+export type { SidebarPanelProps } from './components/SidebarPanel';
+export { Header } from './components/Header';
+export type { HeaderProps } from './components/Header';
+
+// Layout
+export { Card } from './components/Card';
+export type { CardProps, CardLevel } from './components/Card';
+
+// Data display
+export { StatCard } from './components/StatCard';
+export type { StatCardProps, StatCardChangeType } from './components/StatCard';
+
+// Date
+export { DateInput } from './components/DateInput';
+export type { DateInputProps } from './components/DateInput';
+
+// Tabs
+export { FilterTabs } from './components/FilterTabs';
+export type { FilterTabsProps, FilterTabItem } from './components/FilterTabs';
+
+// Navigation (continued)
+export { Breadcrumb } from './components/Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './components/Breadcrumb';
+
+// Feedback (continued)
+export { ProgressBar } from './components/ProgressBar';
+export type { ProgressBarProps, ProgressBarVariant } from './components/ProgressBar';
+export { EmptyState } from './components/EmptyState';
+export type { EmptyStateProps } from './components/EmptyState';
+
+// Stepper
+export { Stepper } from './components/Stepper';
+export type { StepperProps, StepItem, StepStatus } from './components/Stepper';
+
+// Textarea
+export { Textarea } from './components/Textarea';
+export type { TextareaProps } from './components/Textarea';
+
+// Chat
+export { ChatInput } from './components/ChatInput';
+export type { ChatInputProps } from './components/ChatInput';
+
+// Section / Page structure
+export { SectionHeader } from './components/SectionHeader';
+export type { SectionHeaderProps } from './components/SectionHeader';
+
+// File display
+export { FileCard } from './components/FileCard';
+export type { FileCardProps } from './components/FileCard';
+
+// Tabs (continued)
+export { TabBar } from './components/TabBar';
+export type { TabBarProps, TabItem } from './components/TabBar';
+
+// Status / Alerts
+export { OperationStatus } from './components/OperationStatus';
+export type { OperationStatusProps, OperationStatusType } from './components/OperationStatus';
+export { ValidationAlert } from './components/ValidationAlert';
+export type { ValidationAlertProps, ValidationAlertVariant } from './components/ValidationAlert';
+
+// Selection
+export { SelectionCard } from './components/SelectionCard';
+export type { SelectionCardProps } from './components/SelectionCard';
+
+// Overlays
+export { Overlay } from './components/Overlay';
+export type { OverlayProps } from './components/Overlay';
+export { Modal } from './components/Modal';
+export type { ModalProps } from './components/Modal';
+export { GlassPopover } from './components/GlassPopover';
+export type { GlassPopoverProps } from './components/GlassPopover';
+
+// Accordion
+export { Accordion } from './components/Accordion';
+export type { AccordionProps } from './components/Accordion';
+
+// Badge
+export { Badge } from './components/Badge';
+export type { BadgeProps, BadgeVariant } from './components/Badge';
+
+// Banner
+export { Banner } from './components/Banner';
+export type { BannerProps, BannerVariant } from './components/Banner';
+
+// Checkbox
+export { Checkbox } from './components/Checkbox';
+export type { CheckboxProps } from './components/Checkbox';
+
+// Radio
+export { Radio } from './components/Radio';
+export type { RadioProps } from './components/Radio';
+
+// Toggle
+export { Toggle } from './components/Toggle';
+export type { ToggleProps } from './components/Toggle';
+
+// Select
+export { Select } from './components/Select';
+export type { SelectProps, SelectOption } from './components/Select';
+
+// SelectGroup
+export { SelectGroup } from './components/SelectGroup';
+export type { SelectGroupProps } from './components/SelectGroup';
+
+// SegmentedControl
+export { SegmentedControl } from './components/SegmentedControl';
+export type { SegmentedControlProps, SegmentedControlItem } from './components/SegmentedControl';
+
+// DataTable
+export { DataTable } from './components/DataTable';
+export type { DataTableProps, TableColumn, TableRow } from './components/DataTable';
+
+// Pagination
+export { Pagination } from './components/Pagination';
+export type { PaginationProps, PaginationVariant } from './components/Pagination';
+
+// StatusDot
+export { StatusDot } from './components/StatusDot';
+export type { StatusDotProps, StatusDotVariant } from './components/StatusDot';
+
+// Dropzone
+export { Dropzone } from './components/Dropzone';
+export type { DropzoneProps } from './components/Dropzone';
+
+// SplitPane
+export { SplitPane } from './components/SplitPane';
+export type { SplitPaneProps } from './components/SplitPane';
+
+// PricingCard
+export { PricingCard } from './components/PricingCard';
+export type { PricingCardProps } from './components/PricingCard';
+
+// OnboardingPopover
+export { OnboardingPopover } from './components/OnboardingPopover';
+export type { OnboardingPopoverProps } from './components/OnboardingPopover';
+
+// CreditsIndicator
+export { CreditsIndicator } from './components/CreditsIndicator';
+export type { CreditsIndicatorProps } from './components/CreditsIndicator';
+
+// LanguageSelector
+export { LanguageSelector } from './components/LanguageSelector';
+export type { LanguageSelectorProps, LanguageSelectorOption } from './components/LanguageSelector';
+
+// UserProfilePopover
+export { UserProfilePopover } from './components/UserProfilePopover';
+export type { UserProfilePopoverProps, UserProfileMenuItem } from './components/UserProfilePopover';