cronixui 1.0.0 → 1.0.1

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

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+
+export default function Alert({ 
+  type = 'info', 
+  title,
+  children,
+  closable = true,
+  onClose,
+  className = '' 
+}) {
+  const [visible, setVisible] = useState(true);
+
+  const handleClose = () => {
+    setVisible(false);
+    onClose?.();
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div className={`cn-alert cn-alert-${type} ${className}`}>
+      <div className="cn-alert-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          {type === 'success' && <polyline points="20 6 9 17 4 12"></polyline>}
+          {type === 'error' && (
+            <>
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="15" y1="9" x2="9" y2="15"></line>
+              <line x1="9" y1="9" x2="15" y2="15"></line>
+            </>
+          )}
+          {type === 'warning' && (
+            <>
+              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+              <line x1="12" y1="9" x2="12" y2="13"></line>
+              <line x1="12" y1="17" x2="12.01" y2="17"></line>
+            </>
+          )}
+          {type === 'info' && (
+            <>
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="16" x2="12" y2="12"></line>
+              <line x1="12" y1="8" x2="12.01" y2="8"></line>
+            </>
+          )}
+        </svg>
+      </div>
+      <div className="cn-alert-content">
+        {title && <div className="cn-alert-title">{title}</div>}
+        <div className="cn-alert-message">{children}</div>
+      </div>
+      {closable && (
+        <button className="cn-alert-close" onClick={handleClose}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+export default function Avatar({ 
+  src, 
+  alt = '', 
+  initials,
+  size = 'md',
+  className = '' 
+}) {
+  const sizeClass = size !== 'md' ? `cn-avatar-${size}` : '';
+
+  return (
+    <div className={`cn-avatar ${sizeClass} ${className}`}>
+      {src ? (
+        <img src={src} alt={alt} />
+      ) : initials ? (
+        initials
+      ) : null}
+    </div>
+  );
+}
+
+export function AvatarGroup({ children, max, className = '' }) {
+  const items = Array.isArray(children) ? children : [children];
+  const visible = max ? items.slice(0, max) : items;
+  const remaining = max ? items.length - max : 0;
+
+  return (
+    <div className={`cn-avatar-group ${className}`}>
+      {visible}
+      {remaining > 0 && (
+        <div className="cn-avatar">+{remaining}</div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+export default function Badge({ 
+  children, 
+  variant = 'default', 
+  size = 'md',
+  className = '' 
+}) {
+  const variantClass = variant !== 'default' ? `cn-badge-${variant}` : '';
+  const sizeClass = size !== 'md' ? `cn-badge-${size}` : '';
+
+  return (
+    <span className={`cn-badge ${variantClass} ${sizeClass} ${className}`}>
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,27 @@
+export function Breadcrumb({ children, className = '' }) {
+  const items = Array.isArray(children) ? children : [children];
+
+  return (
+    <nav className={`cn-breadcrumb ${className}`}>
+      {items.map((child, idx) => (
+        <span key={idx}>
+          {child}
+          {idx < items.length - 1 && (
+            <span className="cn-breadcrumb-separator">/</span>
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}
+
+export function BreadcrumbItem({ children, href, active = false, className = '' }) {
+  if (active) {
+    return <span className={`cn-breadcrumb-current ${className}`}>{children}</span>;
+  }
+  return (
+    <a href={href} className={`cn-breadcrumb-item ${className}`}>
+      {children}
+    </a>
+  );
+}

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

@@ -0,0 +1,21 @@
+export default function Button({ 
+  children, 
+  variant = 'default', 
+  size = 'md', 
+  disabled = false,
+  className = '',
+  ...props 
+}) {
+  const variantClass = variant !== 'default' ? `cn-btn-${variant}` : '';
+  const sizeClass = size !== 'md' ? `cn-btn-${size}` : '';
+
+  return (
+    <button 
+      className={`cn-btn ${variantClass} ${sizeClass} ${className}`}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,23 @@
+export default function Card({ 
+  children, 
+  hoverable = false,
+  className = '' 
+}) {
+  return (
+    <div className={`cn-card ${hoverable ? 'cn-card-hoverable' : ''} ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+Card.Header = function CardHeader({ children, className = '' }) {
+  return <div className={`cn-card-header ${className}`}>{children}</div>;
+};
+
+Card.Body = function CardBody({ children, className = '' }) {
+  return <div className={`cn-card-body ${className}`}>{children}</div>;
+};
+
+Card.Footer = function CardFooter({ children, className = '' }) {
+  return <div className={`cn-card-footer ${className}`}>{children}</div>;
+};

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

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+
+const Checkbox = forwardRef(function Checkbox({ 
+  checked = false, 
+  onChange, 
+  disabled = false,
+  children,
+  className = '',
+  ...props 
+}, ref) {
+  return (
+    <label className={`cn-checkbox ${disabled ? 'disabled' : ''} ${className}`}>
+      <input
+        ref={ref}
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange?.(e.target.checked)}
+        disabled={disabled}
+        {...props}
+      />
+      <span className="cn-checkbox-box"></span>
+      {children && <span className="cn-checkbox-label">{children}</span>}
+    </label>
+  );
+});
+
+export default Checkbox;

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

@@ -0,0 +1,93 @@
+import { useState, useEffect, useRef } from 'react';
+
+export default function CommandPalette({ 
+  items = [],
+  isOpen = false,
+  onClose,
+  onSelect,
+  placeholder = 'Search commands...',
+  className = '' 
+}) {
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef(null);
+
+  const filtered = items.filter(item =>
+    item.title.toLowerCase().includes(query.toLowerCase()) ||
+    (item.subtitle && item.subtitle.toLowerCase().includes(query.toLowerCase()))
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      setQuery('');
+      setActiveIndex(0);
+      setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (!isOpen) return;
+
+      if (e.key === 'Escape') {
+        onClose?.();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveIndex(i => Math.min(i + 1, filtered.length - 1));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveIndex(i => Math.max(i - 1, 0));
+      } else if (e.key === 'Enter' && filtered[activeIndex]) {
+        handleSelect(filtered[activeIndex]);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, filtered, activeIndex, onClose]);
+
+  const handleSelect = (item) => {
+    item.action?.();
+    onSelect?.(item);
+    onClose?.();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className={`cn-command-palette cn-command-palette-open ${className}`} onClick={(e) => e.target === e.currentTarget && onClose?.()}>
+      <div className="cn-command-palette-inner">
+        <input
+          ref={inputRef}
+          type="text"
+          className="cn-command-palette-input"
+          placeholder={placeholder}
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setActiveIndex(0);
+          }}
+        />
+        <div className="cn-command-palette-results">
+          {filtered.map((item, idx) => (
+            <div
+              key={idx}
+              className={`cn-command-item ${idx === activeIndex ? 'cn-command-item-active' : ''}`}
+              onClick={() => handleSelect(item)}
+              onMouseEnter={() => setActiveIndex(idx)}
+            >
+              {item.icon && <div className="cn-command-item-icon">{item.icon}</div>}
+              <div className="cn-command-item-content">
+                <div className="cn-command-item-title">{item.title}</div>
+                {item.subtitle && (
+                  <div className="cn-command-item-subtitle">{item.subtitle}</div>
+                )}
+              </div>
+              {item.kbd && <div className="cn-command-item-kbd">{item.kbd}</div>}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

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

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

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

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