@camtomlabs/malix-design-system 0.1.2 → 0.1.4

package/src/components/Checkbox.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-
-export type CheckboxProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
-  checked?: boolean;
-  onChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  label?: string;
-  indeterminate?: boolean;
-};
-
-export function Checkbox({
-  checked = false,
-  onChange,
-  disabled = false,
-  label,
-  indeterminate = false,
-  className,
-  ...props
-}: CheckboxProps) {
-  const handleClick = () => {
-    if (!disabled && onChange) {
-      onChange(!checked);
-    }
-  };
-
-  const checkbox = (
-    <button
-      type="button"
-      role="checkbox"
-      className={`malix-checkbox${className ? ` ${className}` : ''}`}
-      data-checked={checked}
-      data-disabled={disabled}
-      data-indeterminate={indeterminate}
-      aria-checked={indeterminate ? 'mixed' : checked}
-      disabled={disabled}
-      onClick={handleClick}
-      {...props}
-    >
-      {checked && !indeterminate ? (
-        <svg
-          className="malix-checkbox__icon"
-          viewBox="0 0 12 12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-        >
-          <path
-            d="M2 6l3 3 5-5"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      ) : null}
-      {indeterminate ? (
-        <svg
-          className="malix-checkbox__icon"
-          viewBox="0 0 12 12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-        >
-          <path
-            d="M2 6h8"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-          />
-        </svg>
-      ) : null}
-    </button>
-  );
-
-  if (label) {
-    return (
-      <label className="malix-checkbox-row">
-        {checkbox}
-        <span className="malix-checkbox-row__label">{label}</span>
-      </label>
-    );
-  }
-
-  return checkbox;
-}

package/src/components/CreditsIndicator.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-export type CreditsIndicatorProps = React.HTMLAttributes<HTMLDivElement> & {
-  remaining: number;
-  label?: string;
-};
-
-export function CreditsIndicator({
-  remaining,
-  label = 'Credits Remaining',
-  className,
-  ...props
-}: CreditsIndicatorProps) {
-  return (
-    <div
-      className={`malix-credits-indicator${className ? ` ${className}` : ''}`}
-      {...props}
-    >
-      <span className="malix-credits-indicator__icon" aria-hidden="true">
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <ellipse cx="12" cy="6" rx="8" ry="3" />
-          <path d="M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6" />
-          <path d="M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6" />
-        </svg>
-      </span>
-      <div className="malix-credits-indicator__info">
-        <span className="malix-credits-indicator__label">{label}</span>
-        <span className="malix-credits-indicator__value">{remaining}</span>
-      </div>
-    </div>
-  );
-}

package/src/components/DataTable.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-
-export type TableColumn = {
-  key: string;
-  header: string;
-  width?: string;
-  render?: (value: any, row: TableRow) => React.ReactNode;
-};
-
-export type TableRow = Record<string, any>;
-
-export type DataTableProps = React.HTMLAttributes<HTMLTableElement> & {
-  columns: TableColumn[];
-  data: TableRow[];
-  onRowClick?: (row: TableRow) => void;
-  emptyMessage?: string;
-  className?: string;
-};
-
-export function DataTable({
-  columns,
-  data,
-  onRowClick,
-  emptyMessage,
-  className,
-  ...props
-}: DataTableProps) {
-  return (
-    <table
-      className={`malix-data-table${className ? ` ${className}` : ''}`}
-      {...props}
-    >
-      <thead>
-        <tr className="malix-data-table__header-row">
-          {columns.map((col) => (
-            <th
-              key={col.key}
-              className="malix-data-table__header-cell"
-              style={col.width ? { width: col.width } : undefined}
-            >
-              {col.header}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody className="malix-data-table__body">
-        {data.length > 0 ? (
-          data.map((row, rowIndex) => (
-            <tr
-              key={rowIndex}
-              className="malix-data-table__data-row"
-              data-clickable={onRowClick ? true : undefined}
-              onClick={onRowClick ? () => onRowClick(row) : undefined}
-            >
-              {columns.map((col) => (
-                <td key={col.key} className="malix-data-table__cell">
-                  {col.render ? col.render(row[col.key], row) : row[col.key]}
-                </td>
-              ))}
-            </tr>
-          ))
-        ) : (
-          <tr className="malix-data-table__data-row">
-            <td
-              className="malix-data-table__cell"
-              colSpan={columns.length}
-            >
-              {emptyMessage || 'No data available'}
-            </td>
-          </tr>
-        )}
-      </tbody>
-    </table>
-  );
-}

package/src/components/DateInput.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-
-export type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & {
-  value?: string;
-  placeholder?: string;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
-};
-
-export function DateInput({
-  value,
-  placeholder = 'dd/mm/yyyy',
-  onChange,
-  disabled,
-  className,
-  id,
-  ...props
-}: DateInputProps) {
-  const inputId = id || `date-input-${React.useId()}`;
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange?.(e.target.value);
-  };
-
-  return (
-    <div
-      className={`malix-date-input${className ? ` ${className}` : ''}`}
-      data-filled={value ? true : undefined}
-      data-disabled={disabled || undefined}
-    >
-      <input
-        id={inputId}
-        type="date"
-        className="malix-date-input__native"
-        value={value}
-        onChange={handleChange}
-        disabled={disabled}
-        aria-label={placeholder}
-        {...props}
-      />
-      <span className="malix-date-input__value">
-        {value || placeholder}
-      </span>
-      <span className="malix-date-input__icon" aria-hidden="true">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M12.667 2.667H3.333C2.597 2.667 2 3.264 2 4v9.333c0 .737.597 1.334 1.333 1.334h9.334c.736 0 1.333-.597 1.333-1.334V4c0-.736-.597-1.333-1.333-1.333ZM10.667 1.333V4M5.333 1.333V4M2 6.667h12"
-            stroke="currentColor"
-            strokeWidth="1.33"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </span>
-    </div>
-  );
-}

package/src/components/Divider.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-export type DividerProps = React.HTMLAttributes<HTMLHRElement>;
-
-export function Divider({ className, ...props }: DividerProps) {
-  return (
-    <hr
-      className={`malix-divider${className ? ` ${className}` : ''}`}
-      {...props}
-    />
-  );
-}

package/src/components/Dropzone.tsx

@@ -1,94 +0,0 @@
-import React, { useRef, useState } from 'react';
-
-export type DropzoneProps = React.HTMLAttributes<HTMLDivElement> & {
-  onDrop?: (files: File[]) => void;
-  accept?: string;
-  title?: string;
-  hint?: string;
-  disabled?: boolean;
-};
-
-export function Dropzone({
-  onDrop,
-  accept,
-  title = 'Drop files here',
-  hint = 'or click to browse',
-  disabled = false,
-  className,
-  ...props
-}: DropzoneProps) {
-  const [dragging, setDragging] = useState(false);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  function handleDragOver(event: React.DragEvent<HTMLDivElement>) {
-    event.preventDefault();
-    if (!disabled) setDragging(true);
-  }
-
-  function handleDragLeave(event: React.DragEvent<HTMLDivElement>) {
-    event.preventDefault();
-    setDragging(false);
-  }
-
-  function handleDrop(event: React.DragEvent<HTMLDivElement>) {
-    event.preventDefault();
-    setDragging(false);
-    if (disabled) return;
-    const files = Array.from(event.dataTransfer.files);
-    onDrop?.(files);
-  }
-
-  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const files = event.target.files ? Array.from(event.target.files) : [];
-    if (files.length > 0) onDrop?.(files);
-    event.target.value = '';
-  }
-
-  function handleClick() {
-    if (!disabled) inputRef.current?.click();
-  }
-
-  return (
-    <div
-      className={`malix-dropzone${className ? ` ${className}` : ''}`}
-      data-dragging={dragging}
-      data-disabled={disabled}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-      onClick={handleClick}
-      role="button"
-      tabIndex={disabled ? -1 : 0}
-      aria-disabled={disabled || undefined}
-      {...props}
-    >
-      <input
-        ref={inputRef}
-        type="file"
-        accept={accept}
-        onChange={handleInputChange}
-        hidden
-        aria-hidden="true"
-      />
-      <svg
-        className="malix-dropzone__icon"
-        width="32"
-        height="32"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        aria-hidden="true"
-      >
-        <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
-        <path d="M12 12v9" />
-        <path d="m16 16-4-4-4 4" />
-      </svg>
-      <span className="malix-dropzone__title">{title}</span>
-      <span className="malix-dropzone__hint">{hint}</span>
-      <span className="malix-dropzone__browse-btn">Browse files</span>
-    </div>
-  );
-}

package/src/components/EmptyState.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-
-export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
-  icon?: React.ReactNode;
-  title: string;
-  description?: string;
-  action?: React.ReactNode;
-};
-
-const DefaultIcon = () => (
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M3 7V5C3 3.895 3.895 3 5 3H9L11 5H19C20.105 5 21 5.895 21 7V9"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <rect
-      x="2"
-      y="9"
-      width="20"
-      height="12"
-      rx="2"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M9 15H15"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export function EmptyState({
-  icon,
-  title,
-  description,
-  action,
-  className,
-  ...props
-}: EmptyStateProps) {
-  return (
-    <div
-      className={`malix-empty-state${className ? ` ${className}` : ''}`}
-      {...props}
-    >
-      <div className="malix-empty-state__icon-wrap">
-        {icon ?? <DefaultIcon />}
-      </div>
-      <h3 className="malix-empty-state__title">{title}</h3>
-      {description ? (
-        <p className="malix-empty-state__description">{description}</p>
-      ) : null}
-      {action ? (
-        <div className="malix-empty-state__action">{action}</div>
-      ) : null}
-    </div>
-  );
-}

package/src/components/FileCard.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-
-export type FileCardProps = React.HTMLAttributes<HTMLDivElement> & {
-  fileName: string;
-  meta?: string;
-  icon?: React.ReactNode;
-  onAction?: React.MouseEventHandler<HTMLButtonElement>;
-};
-
-const DefaultFileIcon = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-    <polyline points="14 2 14 8 20 8" />
-    <line x1="16" y1="13" x2="8" y2="13" />
-    <line x1="16" y1="17" x2="8" y2="17" />
-    <polyline points="10 9 9 9 8 9" />
-  </svg>
-);
-
-const MoreVerticalIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-  >
-    <circle cx="12" cy="5" r="1.5" />
-    <circle cx="12" cy="12" r="1.5" />
-    <circle cx="12" cy="19" r="1.5" />
-  </svg>
-);
-
-export function FileCard({
-  fileName,
-  meta,
-  icon,
-  onAction,
-  className,
-  ...props
-}: FileCardProps) {
-  return (
-    <div
-      className={`malix-file-card${className ? ` ${className}` : ''}`}
-      {...props}
-    >
-      <div className="malix-file-card__icon-wrap">
-        <span className="malix-file-card__icon">
-          {icon ?? <DefaultFileIcon />}
-        </span>
-      </div>
-      <div className="malix-file-card__info">
-        <span className="malix-file-card__name">{fileName}</span>
-        {meta ? (
-          <span className="malix-file-card__meta">{meta}</span>
-        ) : null}
-      </div>
-      {onAction ? (
-        <button
-          type="button"
-          className="malix-file-card__action"
-          onClick={onAction}
-          aria-label="More actions"
-        >
-          <MoreVerticalIcon />
-        </button>
-      ) : null}
-    </div>
-  );
-}

package/src/components/FilterTabs.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-
-export type FilterTabItem = {
-  label: string;
-  count?: number;
-  value: string;
-};
-
-export type FilterTabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
-  items: FilterTabItem[];
-  value: string;
-  onChange: (value: string) => void;
-};
-
-export function FilterTabs({
-  items,
-  value,
-  onChange,
-  className,
-  ...props
-}: FilterTabsProps) {
-  return (
-    <div
-      className={`malix-filter-tabs${className ? ` ${className}` : ''}`}
-      role="tablist"
-      {...props}
-    >
-      {items.map((item) => {
-        const isActive = item.value === value;
-        return (
-          <button
-            key={item.value}
-            type="button"
-            role="tab"
-            className="malix-filter-tabs__tab"
-            data-active={isActive || undefined}
-            aria-selected={isActive}
-            onClick={() => onChange(item.value)}
-          >
-            <span className="malix-filter-tabs__tab-label">{item.label}</span>
-            {item.count != null ? (
-              <span className="malix-filter-tabs__tab-count">{item.count}</span>
-            ) : null}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/FlyoutMenu.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-export type FlyoutMenuItem = {
-  icon?: React.ReactNode;
-  label: string;
-  active?: boolean;
-  onClick?: () => void;
-};
-
-export type FlyoutMenuProps = React.HTMLAttributes<HTMLDivElement> & {
-  items: FlyoutMenuItem[];
-};
-
-export function FlyoutMenu({ items, className, ...props }: FlyoutMenuProps) {
-  return (
-    <nav
-      className={`malix-flyout-menu${className ? ` ${className}` : ''}`}
-      role="menu"
-      {...props}
-    >
-      {items.map((item, i) => (
-        <button
-          key={i}
-          type="button"
-          className="malix-flyout-menu__item"
-          data-active={item.active || undefined}
-          role="menuitem"
-          onClick={item.onClick}
-        >
-          {item.icon ? <span className="malix-flyout-menu__icon">{item.icon}</span> : null}
-          <span className="malix-flyout-menu__label">{item.label}</span>
-        </button>
-      ))}
-    </nav>
-  );
-}

package/src/components/GlassPopover.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-
-export type GlassPopoverProps = React.HTMLAttributes<HTMLDivElement> & {
-  title?: string;
-  onClose?: () => void;
-};
-
-export function GlassPopover({
-  title,
-  onClose,
-  children,
-  className,
-  ...props
-}: GlassPopoverProps) {
-  return (
-    <div
-      className={`malix-glass-popover${className ? ` ${className}` : ''}`}
-      {...props}
-    >
-      {(title || onClose) ? (
-        <div className="malix-glass-popover__header">
-          {title ? <span className="malix-glass-popover__title">{title}</span> : null}
-          {onClose ? (
-            <button
-              type="button"
-              className="malix-glass-popover__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>
-      ) : null}
-      <div className="malix-glass-popover__body">{children}</div>
-    </div>
-  );
-}

package/src/components/Header.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-export type HeaderProps = React.HTMLAttributes<HTMLElement> & {
-  pageTitle: string;
-  actions?: React.ReactNode;
-};
-
-export function Header({ pageTitle, actions, className, ...props }: HeaderProps) {
-  return (
-    <header
-      className={`malix-header${className ? ` ${className}` : ''}`}
-      {...props}
-    >
-      <div className="malix-header__left">
-        <h1 className="malix-header__title">{pageTitle}</h1>
-      </div>
-      {actions ? (
-        <div className="malix-header__right">{actions}</div>
-      ) : null}
-    </header>
-  );
-}

package/src/components/Input.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  leadingIcon?: React.ReactNode;
-};
-
-export function Input({ leadingIcon, ...props }: InputProps) {
-  return (
-    <label className="malix-input-wrap">
-      {leadingIcon ? <span className="malix-button__icon">{leadingIcon}</span> : null}
-      <input className="malix-input" {...props} />
-    </label>
-  );
-}
-
-export function SearchInput(props: Omit<InputProps, 'type'>) {
-  return <Input type="search" placeholder="Search" {...props} />;
-}