@camtomlabs/malix-design-system 0.1.2 → 0.1.3

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>
-  );
-}

package/src/components/Radio.tsx

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

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

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

package/src/components/Select.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-
-export type SelectOption = {
-  value: string;
-  label: string;
-};
-
-export type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> & {
-  placeholder?: string;
-  options?: SelectOption[];
-  onChange?: (value: string) => void;
-  filled?: boolean;
-};
-
-export function Select({
-  value,
-  placeholder,
-  options = [],
-  onChange,
-  disabled,
-  filled,
-  className,
-  ...props
-}: SelectProps) {
-  return (
-    <div
-      className={`malix-select${className ? ` ${className}` : ''}`}
-      data-filled={filled || undefined}
-      data-disabled={disabled || undefined}
-    >
-      <select
-        className="malix-select__native"
-        value={value}
-        disabled={disabled}
-        onChange={(e) => onChange?.(e.target.value)}
-        {...props}
-      >
-        {placeholder ? (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        ) : null}
-        {options.map((opt) => (
-          <option key={opt.value} value={opt.value}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-      <span className="malix-select__icon">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-          <path
-            d="M4 6L8 10L12 6"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </span>
-    </div>
-  );
-}

package/src/components/SelectGroup.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-export type SelectGroupProps = React.HTMLAttributes<HTMLDivElement> & {
-  label?: string;
-  helperText?: string;
-  error?: boolean;
-};
-
-export function SelectGroup({
-  label,
-  helperText,
-  error,
-  children,
-  className,
-  ...props
-}: SelectGroupProps) {
-  return (
-    <div
-      className={`malix-select-group${className ? ` ${className}` : ''}`}
-      data-error={error || undefined}
-      {...props}
-    >
-      {label ? (
-        <span className="malix-select-group__label">{label}</span>
-      ) : null}
-      {children}
-      {helperText ? (
-        <span className="malix-select-group__helper">{helperText}</span>
-      ) : null}
-    </div>
-  );
-}