@camtomlabs/malix-design-system 0.1.2 → 0.1.4

package/src/components/InputGroup.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-export type InputGroupProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  label?: string;
-  helperText?: string;
-  leadingIcon?: React.ReactNode;
-  error?: boolean;
-};
-
-export function InputGroup({
-  label,
-  helperText,
-  leadingIcon,
-  error,
-  id,
-  className,
-  ...props
-}: InputGroupProps) {
-  const inputId = id || `input-${React.useId()}`;
-
-  return (
-    <div className={`malix-input-group${className ? ` ${className}` : ''}`} data-error={error || undefined}>
-      {label ? (
-        <label htmlFor={inputId} className="malix-input-group__label">
-          {label}
-        </label>
-      ) : null}
-      <div className="malix-input-group__field">
-        {leadingIcon ? <span className="malix-input-group__icon">{leadingIcon}</span> : null}
-        <input id={inputId} className="malix-input" {...props} />
-      </div>
-      {helperText ? (
-        <span className="malix-input-group__helper">{helperText}</span>
-      ) : null}
-    </div>
-  );
-}

package/src/components/LanguageSelector.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-
-export type LanguageSelectorOption = {
-  value: string;
-  label: string;
-};
-
-export type LanguageSelectorProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
-  value: string;
-  options?: LanguageSelectorOption[];
-  onChange?: (value: string) => void;
-};
-
-export function LanguageSelector({
-  value,
-  options,
-  onChange,
-  className,
-  ...props
-}: LanguageSelectorProps) {
-  const selectedOption = options?.find((opt) => opt.value === value);
-  const displayLabel = selectedOption?.label ?? value;
-
-  return (
-    <div
-      className={`malix-language-selector${className ? ` ${className}` : ''}`}
-      {...props}
-    >
-      <span className="malix-language-selector__icon" aria-hidden="true">
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <circle cx="12" cy="12" r="10" />
-          <line x1="2" y1="12" x2="22" y2="12" />
-          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z" />
-        </svg>
-      </span>
-
-      <select
-        className="malix-language-selector__select"
-        value={value}
-        onChange={(e) => onChange?.(e.target.value)}
-        aria-label="Select language"
-      >
-        {options ? (
-          options.map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))
-        ) : (
-          <option value={value}>{displayLabel}</option>
-        )}
-      </select>
-
-      <span className="malix-language-selector__label">{displayLabel}</span>
-
-      <span className="malix-language-selector__chevron" aria-hidden="true">
-        <svg
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <polyline points="6 9 12 15 18 9" />
-        </svg>
-      </span>
-    </div>
-  );
-}

package/src/components/Modal.tsx

@@ -1,104 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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>
-  );
-}