@camtomlabs/malix-design-system 0.1.2

package/src/components/Modal.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect, useRef } from 'react';
+
+const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+export type ModalProps = {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  onConfirm?: () => void;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  children: React.ReactNode;
+};
+
+export function Modal({
+  open,
+  title,
+  onClose,
+  onConfirm,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  children,
+}: ModalProps) {
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open || !panelRef.current) return;
+
+    const panel = panelRef.current;
+    const focusables = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+
+    first?.focus();
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClose();
+      }
+
+      if (event.key === 'Tab' && focusables.length > 0) {
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last?.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first?.focus();
+        }
+      }
+    }
+
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="malix-overlay-backdrop" onMouseDown={onClose}>
+      <div
+        ref={panelRef}
+        className="malix-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        onMouseDown={(event) => event.stopPropagation()}
+      >
+        <div className="malix-modal__header">
+          <h2 className="malix-modal__title">{title}</h2>
+          <button
+            type="button"
+            className="malix-modal__close"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            <svg width="18" height="18" 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>
+        </div>
+        <div className="malix-modal__body">{children}</div>
+        <div className="malix-modal__footer">
+          <button
+            type="button"
+            className="malix-button"
+            data-hierarchy="secondary"
+            onClick={onClose}
+          >
+            <span>{cancelLabel}</span>
+          </button>
+          {onConfirm ? (
+            <button
+              type="button"
+              className="malix-button"
+              data-hierarchy="primary"
+              onClick={onConfirm}
+            >
+              <span>{confirmLabel}</span>
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/OnboardingPopover.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+export type OnboardingPopoverProps = React.HTMLAttributes<HTMLDivElement> & {
+  step: number;
+  totalSteps: number;
+  title: string;
+  description: string;
+  onNext?: () => void;
+  onSkip?: () => void;
+  nextLabel?: string;
+};
+
+export function OnboardingPopover({
+  step,
+  totalSteps,
+  title,
+  description,
+  onNext,
+  onSkip,
+  nextLabel = 'Next',
+  className,
+  ...props
+}: OnboardingPopoverProps) {
+  return (
+    <div
+      className={`malix-onboarding-popover${className ? ` ${className}` : ''}`}
+      role="dialog"
+      aria-label={`Step ${step} of ${totalSteps}: ${title}`}
+      {...props}
+    >
+      <span className="malix-onboarding-popover__step">
+        Step {step} of {totalSteps}
+      </span>
+
+      <h3 className="malix-onboarding-popover__title">{title}</h3>
+
+      <p className="malix-onboarding-popover__description">{description}</p>
+
+      <div className="malix-onboarding-popover__actions">
+        {onSkip ? (
+          <button
+            type="button"
+            className="malix-onboarding-popover__skip"
+            onClick={onSkip}
+          >
+            Skip
+          </button>
+        ) : null}
+        {onNext ? (
+          <button
+            type="button"
+            className="malix-onboarding-popover__next-btn"
+            onClick={onNext}
+          >
+            {nextLabel}
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/OperationStatus.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+export type OperationStatusType = 'active' | 'completed' | 'failed' | 'pending';
+
+export type OperationStatusProps = React.HTMLAttributes<HTMLSpanElement> & {
+  status: OperationStatusType;
+  label?: string;
+};
+
+const DEFAULT_LABELS: Record<OperationStatusType, string> = {
+  active: 'Active',
+  completed: 'Completed',
+  failed: 'Failed',
+  pending: 'Pending',
+};
+
+function StatusIcon({ status }: { status: OperationStatusType }) {
+  const shared = { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
+
+  switch (status) {
+    case 'active':
+      // Blinking dot - filled circle, no stroke
+      return (
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="7" cy="7" r="4" />
+        </svg>
+      );
+    case 'completed':
+      return (
+        <svg {...shared}>
+          <circle cx="12" cy="12" r="10" />
+          <path d="m9 12 2 2 4-4" />
+        </svg>
+      );
+    case 'failed':
+      return (
+        <svg {...shared}>
+          <circle cx="12" cy="12" r="10" />
+          <path d="m15 9-6 6" />
+          <path d="m9 9 6 6" />
+        </svg>
+      );
+    case 'pending':
+      return (
+        <svg {...shared}>
+          <circle cx="12" cy="12" r="10" />
+          <polyline points="12 6 12 12 16 14" />
+        </svg>
+      );
+  }
+}
+
+export function OperationStatus({
+  status,
+  label,
+  className,
+  ...props
+}: OperationStatusProps) {
+  return (
+    <span
+      className={`malix-op-status${className ? ` ${className}` : ''}`}
+      data-status={status}
+      {...props}
+    >
+      <span className="malix-op-status__icon">
+        <StatusIcon status={status} />
+      </span>
+      <span className="malix-op-status__label">
+        {label ?? DEFAULT_LABELS[status]}
+      </span>
+    </span>
+  );
+}

package/src/components/Overlay.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef } from 'react';
+
+const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+export type OverlayProps = {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+export function Overlay({ open, title, onClose, children }: OverlayProps) {
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open || !panelRef.current) return;
+
+    const panel = panelRef.current;
+    const focusables = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+
+    first?.focus();
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClose();
+      }
+
+      if (event.key === 'Tab' && focusables.length > 0) {
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last?.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first?.focus();
+        }
+      }
+    }
+
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="malix-overlay-backdrop" onMouseDown={onClose}>
+      <div
+        ref={panelRef}
+        className="malix-overlay-panel"
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        onMouseDown={(event) => event.stopPropagation()}
+      >
+        <h2 className="malix-overlay-title">{title}</h2>
+        {children}
+        <button type="button" className="malix-button malix-overlay-close" data-hierarchy="secondary" onClick={onClose}>
+          Close
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/Pagination.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+export type PaginationVariant = 'full' | 'mini';
+
+export type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  variant?: PaginationVariant;
+  className?: string;
+};
+
+function ChevronLeft() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M10 12L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function ChevronRight() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M6 4L10 8L6 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  variant = 'full',
+  className,
+}: PaginationProps) {
+  const isFirstPage = currentPage <= 1;
+  const isLastPage = currentPage >= totalPages;
+
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+
+  return (
+    <nav
+      className={`malix-pagination${className ? ` ${className}` : ''}`}
+      data-variant={variant}
+      aria-label="Pagination"
+    >
+      <button
+        type="button"
+        className="malix-pagination__arrow"
+        data-disabled={isFirstPage || undefined}
+        disabled={isFirstPage}
+        onClick={() => onPageChange(currentPage - 1)}
+        aria-label="Previous page"
+      >
+        <ChevronLeft />
+      </button>
+
+      {variant === 'full' ? (
+        pages.map((page) => (
+          <button
+            key={page}
+            type="button"
+            className="malix-pagination__item"
+            data-active={page === currentPage || undefined}
+            aria-current={page === currentPage ? 'page' : undefined}
+            onClick={() => onPageChange(page)}
+          >
+            {page}
+          </button>
+        ))
+      ) : (
+        <span className="malix-pagination__label">
+          {currentPage} of {totalPages}
+        </span>
+      )}
+
+      <button
+        type="button"
+        className="malix-pagination__arrow"
+        data-disabled={isLastPage || undefined}
+        disabled={isLastPage}
+        onClick={() => onPageChange(currentPage + 1)}
+        aria-label="Next page"
+      >
+        <ChevronRight />
+      </button>
+    </nav>
+  );
+}

package/src/components/Pill.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export type PillVariant = 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info';
+
+export type PillProps = React.HTMLAttributes<HTMLSpanElement> & {
+  variant?: PillVariant;
+};
+
+export function Pill({ variant = 'default', children, className, ...props }: PillProps) {
+  return (
+    <span
+      className={`malix-pill${className ? ` ${className}` : ''}`}
+      data-variant={variant}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}

package/src/components/PricingCard.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+export type PricingCardProps = React.HTMLAttributes<HTMLDivElement> & {
+  planName: string;
+  price: string;
+  period?: string;
+  description?: string;
+  features: string[];
+  ctaLabel?: string;
+  onCtaClick?: () => void;
+  highlighted?: boolean;
+};
+
+export function PricingCard({
+  planName,
+  price,
+  period = '/month',
+  description,
+  features,
+  ctaLabel = 'Get Started',
+  onCtaClick,
+  highlighted = false,
+  className,
+  ...props
+}: PricingCardProps) {
+  return (
+    <div
+      className={`malix-pricing-card${className ? ` ${className}` : ''}`}
+      data-highlighted={highlighted || undefined}
+      {...props}
+    >
+      <span className="malix-pricing-card__badge">{planName}</span>
+
+      <div className="malix-pricing-card__price-row">
+        <span className="malix-pricing-card__price">{price}</span>
+        <span className="malix-pricing-card__period">{period}</span>
+      </div>
+
+      {description ? (
+        <p className="malix-pricing-card__description">{description}</p>
+      ) : null}
+
+      <ul className="malix-pricing-card__features">
+        {features.map((feature, i) => (
+          <li key={i} className="malix-pricing-card__feature-item">
+            <svg
+              className="malix-pricing-card__check-icon"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            <span>{feature}</span>
+          </li>
+        ))}
+      </ul>
+
+      <button
+        type="button"
+        className="malix-pricing-card__cta"
+        onClick={onCtaClick}
+      >
+        {ctaLabel}
+      </button>
+    </div>
+  );
+}

package/src/components/ProgressBar.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export type ProgressBarVariant = 'default' | 'success';
+
+export type ProgressBarProps = React.HTMLAttributes<HTMLDivElement> & {
+  value: number;
+  label?: string;
+  showPercent?: boolean;
+  variant?: ProgressBarVariant;
+};
+
+export function ProgressBar({
+  value,
+  label,
+  showPercent = true,
+  variant = 'default',
+  className,
+  ...props
+}: ProgressBarProps) {
+  const clampedValue = Math.max(0, Math.min(100, value));
+
+  return (
+    <div
+      className={`malix-progress-bar${className ? ` ${className}` : ''}`}
+      data-variant={variant}
+      role="progressbar"
+      aria-valuenow={clampedValue}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={label}
+      {...props}
+    >
+      {(label || showPercent) ? (
+        <div className="malix-progress-bar__label-row">
+          {label ? <span className="malix-progress-bar__label">{label}</span> : null}
+          {showPercent ? <span className="malix-progress-bar__percent">{clampedValue}%</span> : null}
+        </div>
+      ) : null}
+      <div className="malix-progress-bar__track">
+        <div
+          className="malix-progress-bar__fill"
+          style={{ width: `${clampedValue}%` }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/Radio.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+export type RadioProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+  checked?: boolean;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  label?: string;
+  name?: string;
+  value: string;
+};
+
+export function Radio({
+  checked = false,
+  onChange,
+  disabled = false,
+  label,
+  name,
+  value,
+  className,
+  ...props
+}: RadioProps) {
+  const handleClick = () => {
+    if (!disabled && onChange) {
+      onChange(value);
+    }
+  };
+
+  const radio = (
+    <button
+      type="button"
+      role="radio"
+      className={`malix-radio${className ? ` ${className}` : ''}`}
+      data-checked={checked}
+      data-disabled={disabled}
+      aria-checked={checked}
+      disabled={disabled}
+      data-name={name}
+      data-value={value}
+      onClick={handleClick}
+      {...props}
+    >
+      <span className="malix-radio__dot" />
+    </button>
+  );
+
+  if (label) {
+    return (
+      <label className="malix-radio-row">
+        {radio}
+        <span className="malix-radio-row__label">{label}</span>
+      </label>
+    );
+  }
+
+  return radio;
+}

package/src/components/SectionHeader.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export type SectionHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+};
+
+export function SectionHeader({
+  title,
+  description,
+  actions,
+  className,
+  ...props
+}: SectionHeaderProps) {
+  return (
+    <div
+      className={`malix-section-header${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      <div className="malix-section-header__left">
+        <h2 className="malix-section-header__title">{title}</h2>
+        {description ? (
+          <p className="malix-section-header__description">{description}</p>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className="malix-section-header__actions">{actions}</div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/SegmentedControl.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+export type SegmentedControlItem = {
+  label: string;
+  value: string;
+};
+
+export type SegmentedControlProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  items: SegmentedControlItem[];
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export function SegmentedControl({
+  items,
+  value,
+  onChange,
+  className,
+  ...props
+}: SegmentedControlProps) {
+  return (
+    <div
+      className={`malix-segmented-control${className ? ` ${className}` : ''}`}
+      role="radiogroup"
+      {...props}
+    >
+      {items.map((item) => (
+        <button
+          key={item.value}
+          type="button"
+          className="malix-segmented-control__item"
+          role="radio"
+          aria-checked={item.value === value}
+          data-active={item.value === value || undefined}
+          onClick={() => onChange(item.value)}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}