cronixui 1.0.6 → 1.1.0

package/packages/react/src/components/Dropdown.jsx

@@ -1,48 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-
-export default function Dropdown({ 
-  trigger,
-  children,
-  className = '' 
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
-
-  const toggle = () => setIsOpen((prev) => !prev);
-  const close = () => setIsOpen(false);
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        close();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('click', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  return (
-    <div ref={dropdownRef} className={`cn-dropdown ${isOpen ? 'cn-dropdown-open' : ''} ${className}`}>
-      <div className="cn-dropdown-trigger" onClick={toggle}>
-        {trigger}
-      </div>
-      <div className="cn-dropdown-menu" onClick={close}>
-        {children}
-      </div>
-    </div>
-  );
-}
-
-export function DropdownItem({ children, onClick, className = '', ...props }) {
-  return (
-    <div className={`cn-dropdown-item ${className}`} onClick={onClick} {...props}>
-      {children}
-    </div>
-  );
-}

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

@@ -1,44 +0,0 @@
-import { useState, useRef } from 'react';
-
-export default function FileInput({ 
-  onFileSelect,
-  accept,
-  multiple = false,
-  label = 'Drag and drop files here, or click to browse',
-  className = '' 
-}) {
-  const [fileName, setFileName] = useState('');
-  const inputRef = useRef(null);
-
-  const handleChange = (e) => {
-    const files = Array.from(e.target.files);
-    if (files.length > 0) {
-      setFileName(files.map(f => f.name).join(', '));
-      onFileSelect?.(multiple ? files : files[0]);
-    }
-  };
-
-  return (
-    <div className={`cn-file-input ${fileName ? 'cn-file-input-has-file' : ''} ${className}`}>
-      <input
-        ref={inputRef}
-        type="file"
-        accept={accept}
-        multiple={multiple}
-        onChange={handleChange}
-      />
-      <div className="cn-file-input-label">
-        <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"></path>
-            <polyline points="17 8 12 3 7 8"></polyline>
-            <line x1="12" y1="3" x2="12" y2="15"></line>
-          </svg>
-        </div>
-        <div className="cn-file-input-text">
-          {fileName ? <span>{fileName}</span> : label}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,22 +0,0 @@
-import { forwardRef } from 'react';
-
-const Input = forwardRef(function Input({ 
-  type = 'text',
-  size = 'md',
-  error = false,
-  className = '',
-  ...props 
-}, ref) {
-  const sizeClass = size !== 'md' ? `cn-input-${size}` : '';
-
-  return (
-    <input 
-      ref={ref}
-      type={type}
-      className={`cn-input ${sizeClass} ${error ? 'cn-input-error' : ''} ${className}`}
-      {...props}
-    />
-  );
-});
-
-export default Input;

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

@@ -1,29 +0,0 @@
-export function List({ children, className = '' }) {
-  return <div className={`cn-list ${className}`}>{children}</div>;
-}
-
-export function ListItem({ 
-  children, 
-  icon,
-  title,
-  subtitle,
-  actions,
-  clickable = false,
-  onClick,
-  className = '' 
-}) {
-  return (
-    <div 
-      className={`cn-list-item ${clickable ? 'cn-list-item-clickable' : ''} ${className}`}
-      onClick={onClick}
-    >
-      {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>
-  );
-}

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

@@ -1,65 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export default function Modal({ 
-  isOpen = false, 
-  onClose, 
-  children,
-  className = '' 
-}) {
-  const modalRef = useRef(null);
-
-  useEffect(() => {
-    const handleEscape = (e) => {
-      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;
-
-  return (
-    <div 
-      className={`cn-modal-backdrop cn-modal-open ${className}`}
-      onClick={(e) => e.target === e.currentTarget && onClose?.()}
-    >
-      <div className="cn-modal" ref={modalRef}>
-        {children}
-      </div>
-    </div>
-  );
-}
-
-Modal.Header = function ModalHeader({ children, onClose, className = '' }) {
-  return (
-    <div className={`cn-modal-header ${className}`}>
-      <div className="cn-modal-title">{children}</div>
-      {onClose && (
-        <button className="cn-modal-close" onClick={onClose}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-};
-
-Modal.Body = function ModalBody({ children, className = '' }) {
-  return <div className={`cn-modal-body ${className}`}>{children}</div>;
-};
-
-Modal.Footer = function ModalFooter({ children, className = '' }) {
-  return <div className={`cn-modal-footer ${className}`}>{children}</div>;
-};

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

@@ -1,50 +0,0 @@
-import { useState } from 'react';
-
-export default function Nav({ 
-  defaultActive, 
-  active: controlledActive, 
-  onChange, 
-  children,
-  className = '' 
-}) {
-  const [internalActive, setInternalActive] = useState(defaultActive);
-  const activeItem = controlledActive !== undefined ? controlledActive : internalActive;
-
-  const handleClick = (item) => {
-    if (onChange) {
-      onChange(item);
-    } else {
-      setInternalActive(item);
-    }
-  };
-
-  return (
-    <nav className={`cn-nav ${className}`}>
-      {children.map((child, idx) => {
-        const isActive = child.props.active !== undefined 
-          ? child.props.active 
-          : child.props.id === activeItem;
-
-        return {
-          ...child,
-          props: {
-            ...child.props,
-            active: isActive,
-            onClick: () => handleClick(child.props.id),
-          }
-        };
-      })}
-    </nav>
-  );
-}
-
-export function NavItem({ children, active = false, onClick, className = '' }) {
-  return (
-    <div 
-      className={`cn-nav-item ${active ? 'cn-nav-active' : ''} ${className}`}
-      onClick={onClick}
-    >
-      {children}
-    </div>
-  );
-}

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

@@ -1,81 +0,0 @@
-import { useState } from 'react';
-
-export default function Pagination({ 
-  total, 
-  current = 1, 
-  onChange,
-  className = '' 
-}) {
-  const [page, setPage] = useState(current);
-
-  const activePage = onChange !== undefined ? current : page;
-
-  const getPages = () => {
-    const pages = [];
-    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) => {
-    if (p < 1 || p > total || p === activePage) return;
-    if (onChange) {
-      onChange(p);
-    } else {
-      setPage(p);
-    }
-  };
-
-  return (
-    <div className={`cn-pagination ${className}`}>
-      <button
-        className="cn-pagination-item"
-        onClick={() => goTo(activePage - 1)}
-        disabled={activePage === 1}
-      >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
-          <polyline points="15 18 9 12 15 6"></polyline>
-        </svg>
-      </button>
-      {getPages().map((p, idx) => (
-        <button
-          key={idx}
-          className={`cn-pagination-item ${p === activePage ? 'cn-pagination-active' : ''}`}
-          onClick={() => typeof p === 'number' && goTo(p)}
-          disabled={p === '...'}
-        >
-          {p}
-        </button>
-      ))}
-      <button
-        className="cn-pagination-item"
-        onClick={() => goTo(activePage + 1)}
-        disabled={activePage === total}
-      >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
-          <polyline points="9 18 15 12 9 6"></polyline>
-        </svg>
-      </button>
-    </div>
-  );
-}

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

@@ -1,23 +0,0 @@
-export default function Progress({ 
-  value = 0, 
-  max = 100,
-  showLabel = false,
-  variant = 'default',
-  size = 'md',
-  className = '' 
-}) {
-  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
-
-  return (
-    <div className={className}>
-      {showLabel && (
-        <div className="cn-progress-label">
-          <span>{percentage.toFixed(0)}%</span>
-        </div>
-      )}
-      <div className={`cn-progress ${size !== 'md' ? `cn-progress-${size}` : ''} ${variant !== 'default' ? `cn-progress-${variant}` : ''}`}>
-        <div className="cn-progress-bar" style={{ width: `${percentage}%` }}></div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,50 +0,0 @@
-import { forwardRef } from 'react';
-
-const Radio = forwardRef(function Radio({ 
-  checked = false, 
-  onChange, 
-  disabled = false,
-  children,
-  name,
-  className = '',
-  ...props 
-}, ref) {
-  return (
-    <label className={`cn-radio ${disabled ? 'disabled' : ''} ${className}`}>
-      <input
-        ref={ref}
-        type="radio"
-        checked={checked}
-        onChange={(e) => onChange?.(e.target.checked)}
-        disabled={disabled}
-        name={name}
-        {...props}
-      />
-      <span className="cn-radio-box"></span>
-      {children && <span className="cn-radio-label">{children}</span>}
-    </label>
-  );
-});
-
-export function RadioGroup({ children, name, value, onChange, className = '' }) {
-  return (
-    <div className={className} role="radiogroup">
-      {children.map((child, idx) => {
-        if (child.type?.displayName === 'Radio') {
-          return {
-            ...child,
-            props: {
-              ...child.props,
-              name,
-              checked: child.props.value === value,
-              onChange: () => onChange?.(child.props.value),
-            }
-          };
-        }
-        return child;
-      })}
-    </div>
-  );
-}
-
-export default Radio;

package/packages/react/src/components/Search.jsx

@@ -1,70 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-
-export default function Search({ 
-  items = [],
-  placeholder = 'Search...',
-  onSelect,
-  className = '' 
-}) {
-  const [query, setQuery] = useState('');
-  const [isOpen, setIsOpen] = useState(false);
-  const ref = useRef(null);
-
-  const filtered = items.filter(item =>
-    item.title.toLowerCase().includes(query.toLowerCase()) ||
-    (item.subtitle && item.subtitle.toLowerCase().includes(query.toLowerCase()))
-  );
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('click', handleClickOutside);
-    return () => document.removeEventListener('click', handleClickOutside);
-  }, []);
-
-  const handleSelect = (item) => {
-    setQuery(item.title);
-    setIsOpen(false);
-    onSelect?.(item);
-  };
-
-  return (
-    <div ref={ref} className={`cn-search ${isOpen ? 'cn-search-open' : ''} ${className}`}>
-      <svg className="cn-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-      </svg>
-      <input
-        type="text"
-        className="cn-input cn-search-input"
-        placeholder={placeholder}
-        value={query}
-        onChange={(e) => {
-          setQuery(e.target.value);
-          setIsOpen(true);
-        }}
-        onFocus={() => setIsOpen(true)}
-      />
-      {isOpen && filtered.length > 0 && (
-        <div className="cn-search-results">
-          {filtered.map((item, idx) => (
-            <div
-              key={idx}
-              className="cn-search-result"
-              onClick={() => handleSelect(item)}
-            >
-              <div className="cn-search-result-title">{item.title}</div>
-              {item.subtitle && (
-                <div className="cn-search-result-subtitle">{item.subtitle}</div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

package/packages/react/src/components/Select.jsx

@@ -1,33 +0,0 @@
-import { forwardRef } from 'react';
-
-const Select = forwardRef(function Select({ 
-  options = [],
-  value,
-  onChange,
-  placeholder = 'Select...',
-  disabled = false,
-  className = '',
-  ...props 
-}, ref) {
-  return (
-    <div className={`cn-select-wrapper ${className}`}>
-      <select
-        ref={ref}
-        className="cn-select"
-        value={value}
-        onChange={(e) => onChange?.(e.target.value)}
-        disabled={disabled}
-        {...props}
-      >
-        {placeholder && <option value="" disabled>{placeholder}</option>}
-        {options.map((opt, idx) => (
-          <option key={idx} value={opt.value}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-});
-
-export default Select;

package/packages/react/src/components/Skeleton.jsx

@@ -1,15 +0,0 @@
-export default function Skeleton({ 
-  variant = 'text', 
-  width,
-  height,
-  className = '' 
-}) {
-  const variantClass = variant !== 'text' ? `cn-skeleton-${variant}` : 'cn-skeleton';
-
-  const style = {
-    width: width,
-    height: height,
-  };
-
-  return <div className={`${variantClass} ${className}`} style={style}></div>;
-}

package/packages/react/src/components/Slider.jsx

@@ -1,29 +0,0 @@
-import { forwardRef } from 'react';
-
-const Slider = forwardRef(function Slider({ 
-  value = 0, 
-  min = 0, 
-  max = 100, 
-  step = 1,
-  onChange,
-  disabled = false,
-  className = '',
-  ...props 
-}, ref) {
-  return (
-    <input
-      ref={ref}
-      type="range"
-      className={`cn-slider ${className}`}
-      value={value}
-      min={min}
-      max={max}
-      step={step}
-      onChange={(e) => onChange?.(Number(e.target.value))}
-      disabled={disabled}
-      {...props}
-    />
-  );
-});
-
-export default Slider;

package/packages/react/src/components/Spinner.jsx

@@ -1,5 +0,0 @@
-export default function Spinner({ size = 'md', className = '' }) {
-  const sizeClass = size !== 'md' ? `cn-spinner-${size}` : '';
-
-  return <div className={`cn-spinner ${sizeClass} ${className}`}></div>;
-}

package/packages/react/src/components/Stat.jsx

@@ -1,19 +0,0 @@
-export default function Stat({ 
-  value, 
-  label,
-  delta,
-  deltaType = 'up',
-  className = '' 
-}) {
-  return (
-    <div className={`cn-stat ${className}`}>
-      <div className="cn-stat-value">{value}</div>
-      {label && <div className="cn-stat-label">{label}</div>}
-      {delta && (
-        <div className={`cn-stat-delta cn-stat-delta-${deltaType}`}>
-          {deltaType === 'up' ? '↑' : '↓'} {delta}
-        </div>
-      )}
-    </div>
-  );
-}

package/packages/react/src/components/Table.jsx

@@ -1,48 +0,0 @@
-import { forwardRef } from 'react';
-
-const Table = forwardRef(function Table({ 
-  columns = [], 
-  data = [],
-  sortable = false,
-  onSort,
-  className = '' 
-}, ref) {
-  const handleSort = (column) => {
-    if (!sortable || !column.sortable) return;
-    onSort?.(column.key);
-  };
-
-  return (
-    <div className={`cn-table-wrapper ${sortable ? 'cn-table-sortable' : ''} ${className}`}>
-      <table className="cn-table" ref={ref}>
-        <thead>
-          <tr>
-            {columns.map((col, idx) => (
-              <th 
-                key={idx}
-                onClick={() => handleSort(col)}
-                data-sort={col.key}
-              >
-                {col.header}
-                {col.sortable && ' ↕'}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {data.map((row, idx) => (
-            <tr key={idx}>
-              {columns.map((col, colIdx) => (
-                <td key={colIdx}>
-                  {col.render ? col.render(row) : row[col.key]}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-});
-
-export default Table;