cronixui 1.0.5 → 1.1.0

package/packages/react/src/components/FileInput.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+export interface FileInputProps {
+  onFileSelect?: (file: File | File[]) => void;
+  accept?: string;
+  multiple?: boolean;
+  label?: string;
+  className?: string;
+}
+
+export const FileInput: React.FC<FileInputProps> = ({
+  onFileSelect,
+  accept,
+  multiple = false,
+  label = 'Drag and drop files here, or click to browse',
+  className = '',
+}) => {
+  const [fileName, setFileName] = React.useState('');
+  const [isDragging, setIsDragging] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const processFiles = React.useCallback((files: File[]) => {
+    if (files.length > 0) {
+      setFileName(files.map(f => f.name).join(', '));
+      onFileSelect?.(multiple ? files : files[0]);
+    }
+  }, [multiple, onFileSelect]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    processFiles(files);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    const files = Array.from(e.dataTransfer.files);
+    processFiles(files);
+  };
+
+  return (
+    <div className={`cn-file-input ${fileName ? 'cn-file-input-has-file' : ''} ${isDragging ? 'cn-file-input-dragging' : ''} ${className}`.trim()}>
+      <label
+        className="cn-file-input-label"
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          onChange={handleChange}
+        />
+        <div className="cn-file-input-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="17 8 12 3 7 8" />
+            <line x1="12" y1="3" x2="12" y2="15" />
+          </svg>
+        </div>
+        <div className="cn-file-input-text">
+          {fileName ? <span>{fileName}</span> : label}
+        </div>
+      </label>
+    </div>
+  );
+};
+
+FileInput.displayName = 'FileInput';
+
+export default FileInput;

package/packages/react/src/components/Footer.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+  links?: Array<{ label: string; href: string }>;
+  copyright?: string;
+}
+
+export const Footer: React.FC<FooterProps> = ({
+  links,
+  copyright,
+  children,
+  className = '',
+  ...props
+}) => {
+  return (
+    <footer className={`cn-footer ${className}`.trim()} {...props}>
+      <div className="cn-footer-content">
+        {links && (
+          <div className="cn-footer-links">
+            {links.map((link, idx) => (
+              <a key={idx} href={link.href} className="cn-footer-link">
+                {link.label}
+              </a>
+            ))}
+          </div>
+        )}
+        {copyright && <div className="cn-footer-copyright">{copyright}</div>}
+        {children}
+      </div>
+    </footer>
+  );
+};
+
+Footer.displayName = 'Footer';
+
+export default Footer;

package/packages/react/src/components/FormGroup.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+export interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: React.ReactNode;
+  error?: React.ReactNode;
+  help?: React.ReactNode;
+  required?: boolean;
+}
+
+export const FormGroup: React.FC<FormGroupProps> = ({
+  children,
+  label,
+  error,
+  help,
+  required = false,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`cn-form-group ${className}`.trim()} {...props}>
+      {label && (
+        <label className="cn-form-label">
+          {label}
+          {required && <span style={{ color: 'var(--cn-error-text)', marginLeft: 'var(--cn-space-1)' }}>*</span>}
+        </label>
+      )}
+      {children}
+      {error && <div className="cn-form-error">{error}</div>}
+      {!error && help && <div className="cn-form-help">{help}</div>}
+    </div>
+  );
+};
+
+FormGroup.displayName = 'FormGroup';
+
+export default FormGroup;

package/packages/react/src/components/Header.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+  brand?: React.ReactNode;
+  nav?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+export const Header: React.FC<HeaderProps> = ({
+  brand,
+  nav,
+  actions,
+  children,
+  className = '',
+  ...props
+}) => {
+  return (
+    <header className={`cn-header ${className}`.trim()} {...props}>
+      {brand && <div className="cn-header-brand">{brand}</div>}
+      {nav && <div className="cn-header-nav">{nav}</div>}
+      {actions && <div className="cn-header-actions">{actions}</div>}
+      {children}
+    </header>
+  );
+};
+
+Header.displayName = 'Header';
+
+export default Header;

package/packages/react/src/components/Input.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: InputSize;
+  error?: boolean;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ size = 'md', error = false, icon, action, className = '', ...props }, ref) => {
+    const sizeClass = size !== 'md' ? `cn-input-${size}` : '';
+
+    if (icon) {
+      return (
+        <div className="cn-input-icon-wrapper">
+          <div className="cn-input-icon">{icon}</div>
+          <input
+            ref={ref}
+            className={`cn-input ${sizeClass} ${error ? 'cn-input-error' : ''} ${className}`.trim()}
+            {...props}
+          />
+        </div>
+      );
+    }
+
+    if (action) {
+      return (
+        <div className="cn-input-action-wrapper">
+          <input
+            ref={ref}
+            className={`cn-input ${sizeClass} ${error ? 'cn-input-error' : ''} ${className}`.trim()}
+            {...props}
+          />
+          <div className="cn-input-action">{action}</div>
+        </div>
+      );
+    }
+
+    return (
+      <input
+        ref={ref}
+        className={`cn-input ${sizeClass} ${error ? 'cn-input-error' : ''} ${className}`.trim()}
+        {...props}
+      />
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export default Input;

package/packages/react/src/components/List.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode;
+  title?: string;
+  subtitle?: string;
+  actions?: React.ReactNode;
+  clickable?: boolean;
+}
+
+export const List: React.FC<ListProps> = ({ children, className = '', ...props }) => {
+  return (
+    <div className={`cn-list ${className}`.trim()} role="list" {...props}>
+      {children}
+    </div>
+  );
+};
+
+List.displayName = 'List';
+
+export const ListItem: React.FC<ListItemProps> = ({
+  children,
+  icon,
+  title,
+  subtitle,
+  actions,
+  clickable = false,
+  onClick,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div
+      className={`cn-list-item ${clickable ? 'cn-list-item-clickable' : ''} ${className}`.trim()}
+      onClick={onClick}
+      role={clickable ? 'button' : 'listitem'}
+      tabIndex={clickable ? 0 : undefined}
+      {...props}
+    >
+      {icon && <div className="cn-list-item-icon">{icon}</div>}
+      <div className="cn-list-item-content">
+        {title && <div className="cn-list-item-title">{title}</div>}
+        {subtitle && <div className="cn-list-item-subtitle">{subtitle}</div>}
+        {children}
+      </div>
+      {actions && <div className="cn-list-item-actions">{actions}</div>}
+    </div>
+  );
+};
+
+ListItem.displayName = 'ListItem';
+
+export default List;

package/packages/react/src/components/Modal.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+  isOpen?: boolean;
+  onClose?: () => void;
+  size?: ModalSize;
+}
+
+export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  onClose?: () => void;
+}
+
+export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Modal: React.FC<ModalProps> & {
+  Header: React.FC<ModalHeaderProps>;
+  Body: React.FC<ModalBodyProps>;
+  Footer: React.FC<ModalFooterProps>;
+} = Object.assign(
+  ({ isOpen = false, onClose, size = 'md', children, className = '', ...props }: ModalProps) => {
+    React.useEffect(() => {
+      const handleEscape = (e: KeyboardEvent) => {
+        if (e.key === 'Escape' && onClose) {
+          onClose();
+        }
+      };
+
+      if (isOpen) {
+        document.addEventListener('keydown', handleEscape);
+        document.body.style.overflow = 'hidden';
+      }
+
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+        document.body.style.overflow = '';
+      };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    const sizeClass = size !== 'md' ? `cn-modal-${size}` : '';
+
+    return (
+      <div
+        className={`cn-modal-backdrop cn-modal-open ${className}`.trim()}
+        onClick={(e) => e.target === e.currentTarget && onClose?.()}
+        role="dialog"
+        aria-modal="true"
+        {...props}
+      >
+        <div className={`cn-modal ${sizeClass}`.trim()}>
+          {children}
+        </div>
+      </div>
+    );
+  },
+  {
+    Header: ({ children, onClose, className = '', ...props }: ModalHeaderProps) => (
+      <div className={`cn-modal-header ${className}`.trim()} {...props}>
+        <div className="cn-modal-title">{children}</div>
+        {onClose && (
+          <button className="cn-modal-close" onClick={onClose} aria-label="Close">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        )}
+      </div>
+    ),
+    Body: ({ children, className = '', ...props }: ModalBodyProps) => (
+      <div className={`cn-modal-body ${className}`.trim()} {...props}>{children}</div>
+    ),
+    Footer: ({ children, className = '', ...props }: ModalFooterProps) => (
+      <div className={`cn-modal-footer ${className}`.trim()} {...props}>{children}</div>
+    ),
+  }
+);
+
+Modal.displayName = 'Modal';
+Modal.Header.displayName = 'Modal.Header';
+Modal.Body.displayName = 'Modal.Body';
+Modal.Footer.displayName = 'Modal.Footer';
+
+export default Modal;

package/packages/react/src/components/Nav.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+
+export interface NavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+  defaultActive?: string;
+  active?: string;
+  onChange?: (id: string) => void;
+}
+
+export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  id: string;
+  active?: boolean;
+}
+
+export const Nav: React.FC<NavProps> & {
+  Item: React.FC<NavItemProps>;
+} = Object.assign(
+  ({ defaultActive, active: controlledActive, onChange, children, className = '', ...props }: NavProps) => {
+    const [internalActive, setInternalActive] = React.useState(defaultActive);
+    const activeItem = controlledActive !== undefined ? controlledActive : internalActive;
+
+    const handleClick = (id: string) => {
+      if (onChange) {
+        onChange(id);
+      } else {
+        setInternalActive(id);
+      }
+    };
+
+    return (
+      <nav className={`cn-nav ${className}`.trim()} {...props}>
+        {React.Children.map(children, (child) => {
+          if (React.isValidElement<NavItemProps>(child)) {
+            const isActive = child.props.active !== undefined ? child.props.active : child.props.id === activeItem;
+            return React.cloneElement(child, {
+              active: isActive,
+              onClick: () => handleClick(child.props.id),
+            } as Partial<NavItemProps>);
+          }
+          return child;
+        })}
+      </nav>
+    );
+  },
+  {
+    Item: ({ children, active = false, onClick, className = '', ...props }: NavItemProps) => (
+      <div
+        className={`cn-nav-item ${active ? 'cn-nav-active' : ''} ${className}`.trim()}
+        onClick={onClick}
+        role="tab"
+        aria-selected={active}
+        tabIndex={0}
+        {...props}
+      >
+        {children}
+      </div>
+    ),
+  }
+);
+
+Nav.displayName = 'Nav';
+(Nav.Item as React.FC<NavItemProps> & { displayName?: string }).displayName = 'NavItem';
+
+export default Nav;

package/packages/react/src/components/Pagination.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  total: number;
+  current?: number;
+  onChange?: (page: number) => void;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  total,
+  current = 1,
+  onChange,
+  className = '',
+  ...props
+}) => {
+  const [page, setPage] = React.useState(current);
+
+  const activePage = onChange !== undefined ? current : page;
+
+  const getPages = (): (number | string)[] => {
+    const pages: (number | string)[] = [];
+    const maxVisible = 5;
+
+    if (total <= maxVisible) {
+      for (let i = 1; i <= total; i++) pages.push(i);
+    } else {
+      if (activePage <= 3) {
+        for (let i = 1; i <= 4; i++) pages.push(i);
+        pages.push('...');
+        pages.push(total);
+      } else if (activePage >= total - 2) {
+        pages.push(1);
+        pages.push('...');
+        for (let i = total - 3; i <= total; i++) pages.push(i);
+      } else {
+        pages.push(1);
+        pages.push('...');
+        for (let i = activePage - 1; i <= activePage + 1; i++) pages.push(i);
+        pages.push('...');
+        pages.push(total);
+      }
+    }
+
+    return pages;
+  };
+
+  const goTo = (p: number) => {
+    if (p < 1 || p > total || p === activePage) return;
+    if (onChange) {
+      onChange(p);
+    } else {
+      setPage(p);
+    }
+  };
+
+  return (
+    <nav className={`cn-pagination ${className}`.trim()} aria-label="Pagination" {...props}>
+      <button
+        className="cn-pagination-item"
+        onClick={() => goTo(activePage - 1)}
+        disabled={activePage === 1}
+        aria-label="Previous page"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+      {getPages().map((p, idx) =>
+        p === '...' ? (
+          <button
+            key={idx}
+            className="cn-pagination-item cn-pagination-ellipsis"
+            disabled
+            aria-label="More pages"
+            aria-hidden="true"
+            tabIndex={-1}
+          >
+            {p}
+          </button>
+        ) : (
+          <button
+            key={idx}
+            className={`cn-pagination-item ${p === activePage ? 'cn-pagination-active' : ''}`.trim()}
+            onClick={() => goTo(p)}
+            aria-current={p === activePage ? 'page' : undefined}
+          >
+            {p}
+          </button>
+        )
+      )}
+      <button
+        className="cn-pagination-item"
+        onClick={() => goTo(activePage + 1)}
+        disabled={activePage === total}
+        aria-label="Next page"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+    </nav>
+  );
+};
+
+Pagination.displayName = 'Pagination';
+
+export default Pagination;

package/packages/react/src/components/Progress.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+export type ProgressVariant = 'default' | 'success' | 'warning' | 'error';
+export type ProgressSize = 'sm' | 'md' | 'lg';
+
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  max?: number;
+  showLabel?: boolean;
+  label?: string;
+  variant?: ProgressVariant;
+  size?: ProgressSize;
+}
+
+export const Progress: React.FC<ProgressProps> = ({
+  value = 0,
+  max = 100,
+  showLabel = false,
+  label,
+  variant = 'default',
+  size = 'md',
+  className = '',
+  ...props
+}) => {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  return (
+    <div className={className} {...props}>
+      {showLabel && (
+        <div className="cn-progress-label">
+          <span>{label ?? `${percentage.toFixed(0)}%`}</span>
+        </div>
+      )}
+      <div
+        className={`cn-progress ${size !== 'md' ? `cn-progress-${size}` : ''} ${variant !== 'default' ? `cn-progress-${variant}` : ''}`.trim()}
+        role="progressbar"
+        aria-valuenow={percentage}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        <div className="cn-progress-bar" style={{ width: `${percentage}%` }} />
+      </div>
+    </div>
+  );
+};
+
+Progress.displayName = 'Progress';
+
+export default Progress;

package/packages/react/src/components/Radio.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  value: string;
+}
+
+export interface RadioGroupProps {
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  ({ checked = false, onChange, disabled = false, children, name, className = '', ...props }, ref) => {
+    return (
+      <label className={`cn-radio ${disabled ? 'disabled' : ''} ${className}`.trim()}>
+        <input
+          ref={ref}
+          type="radio"
+          checked={checked}
+          onChange={(e) => onChange?.(e.target.checked)}
+          disabled={disabled}
+          name={name}
+          {...props}
+        />
+        <span className="cn-radio-box" />
+        {children && <span className="cn-radio-label">{children}</span>}
+      </label>
+    );
+  }
+);
+
+Radio.displayName = 'Radio';
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  children,
+  name,
+  value,
+  onChange,
+  className = '',
+}) => {
+  return (
+    <div className={className} role="radiogroup">
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement<RadioProps>(child) && child.type === Radio) {
+          return React.cloneElement(child, {
+            name,
+            checked: child.props.value === value,
+            onChange: () => onChange?.(child.props.value),
+          });
+        }
+        return child;
+      })}
+    </div>
+  );
+};
+
+RadioGroup.displayName = 'RadioGroup';
+
+export default Radio;