cronixui 1.0.6 → 1.1.0

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {}
+
+export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
+  href?: string;
+  active?: boolean;
+}
+
+export const Breadcrumb: React.FC<BreadcrumbProps> & {
+  Item: React.FC<BreadcrumbItemProps>;
+} = Object.assign(
+  ({ children, className = '', ...props }: BreadcrumbProps) => {
+    const items = React.Children.toArray(children);
+
+    return (
+      <nav className={`cn-breadcrumb ${className}`.trim()} aria-label="Breadcrumb" {...props}>
+        {items.map((child, idx) => (
+          <span key={idx}>
+            {child}
+            {idx < items.length - 1 && (
+              <span className="cn-breadcrumb-separator" aria-hidden="true">/</span>
+            )}
+          </span>
+        ))}
+      </nav>
+    );
+  },
+  {
+    Item: ({ children, href, active = false, className = '', ...props }: BreadcrumbItemProps) => {
+      if (active) {
+        return (
+          <span className={`cn-breadcrumb-current ${className}`.trim()} aria-current="page" {...props}>
+            {children}
+          </span>
+        );
+      }
+      return (
+        <a href={href} className={`cn-breadcrumb-item ${className}`.trim()} {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}>
+          {children}
+        </a>
+      );
+    },
+  }
+);
+
+Breadcrumb.displayName = 'Breadcrumb';
+(Breadcrumb.Item as React.FC<BreadcrumbItemProps> & { displayName?: string }).displayName = 'BreadcrumbItem';
+
+export default Breadcrumb;

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+export type ButtonVariant = 'primary' | 'ghost' | 'outline' | 'danger' | 'success' | 'default';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  icon?: boolean;
+}
+
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Button: React.FC<ButtonProps> & {
+  Group: React.FC<ButtonGroupProps>;
+} = Object.assign(
+  React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ children, variant = 'default', size = 'md', icon = false, disabled = false, className = '', ...props }, ref) => {
+      const variantClass = variant !== 'default' ? `cn-btn-${variant}` : '';
+      const sizeClass = size !== 'md' ? `cn-btn-${size}` : '';
+      const iconClass = icon ? 'cn-btn-icon' : '';
+
+      return (
+        <button
+          ref={ref}
+          className={`cn-btn ${variantClass} ${sizeClass} ${iconClass} ${className}`.trim()}
+          disabled={disabled}
+          {...props}
+        >
+          {children}
+        </button>
+      );
+    }
+  ),
+  {
+    Group: ({ children, className = '', ...props }: ButtonGroupProps) => (
+      <div className={`cn-btn-group ${className}`.trim()} {...props}>
+        {children}
+      </div>
+    ),
+  }
+);
+
+Button.displayName = 'Button';
+Button.Group.displayName = 'Button.Group';
+
+export default Button;

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  clickable?: boolean;
+}
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface CardIconProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface CardSubtitleProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Card: React.FC<CardProps> & {
+  Header: React.FC<CardHeaderProps>;
+  Body: React.FC<CardBodyProps>;
+  Footer: React.FC<CardFooterProps>;
+  Icon: React.FC<CardIconProps>;
+  Title: React.FC<CardTitleProps>;
+  Subtitle: React.FC<CardSubtitleProps>;
+} = Object.assign(
+  ({ children, clickable = false, className = '', ...props }: CardProps) => {
+    return (
+      <div
+        className={`cn-card ${clickable ? 'cn-card-clickable' : ''} ${className}`.trim()}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+  {
+    Header: ({ children, className = '', ...props }: CardHeaderProps) => (
+      <div className={`cn-card-header ${className}`.trim()} {...props}>{children}</div>
+    ),
+    Body: ({ children, className = '', ...props }: CardBodyProps) => (
+      <div className={`cn-card-body ${className}`.trim()} {...props}>{children}</div>
+    ),
+    Footer: ({ children, className = '', ...props }: CardFooterProps) => (
+      <div className={`cn-card-footer ${className}`.trim()} {...props}>{children}</div>
+    ),
+    Icon: ({ children, className = '', ...props }: CardIconProps) => (
+      <div className={`cn-card-icon ${className}`.trim()} {...props}>
+        {children}
+      </div>
+    ),
+    Title: ({ children, className = '', ...props }: CardTitleProps) => (
+      <div className={`cn-card-title ${className}`.trim()} {...props}>{children}</div>
+    ),
+    Subtitle: ({ children, className = '', ...props }: CardSubtitleProps) => (
+      <div className={`cn-card-subtitle ${className}`.trim()} {...props}>{children}</div>
+    ),
+  }
+);
+
+Card.displayName = 'Card';
+Card.Header.displayName = 'Card.Header';
+Card.Body.displayName = 'Card.Body';
+Card.Footer.displayName = 'Card.Footer';
+Card.Icon.displayName = 'Card.Icon';
+Card.Title.displayName = 'Card.Title';
+Card.Subtitle.displayName = 'Card.Subtitle';
+
+export default Card;

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  label?: React.ReactNode;
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ checked = false, onChange, disabled = false, children, label, className = '', ...props }, ref) => {
+    return (
+      <label className={`cn-checkbox ${disabled ? 'disabled' : ''} ${className}`.trim()}>
+        <input
+          ref={ref}
+          type="checkbox"
+          checked={checked}
+          onChange={(e) => onChange?.(e.target.checked)}
+          disabled={disabled}
+          {...props}
+        />
+        <span className="cn-checkbox-box" />
+        {(label || children) && <span className="cn-checkbox-label">{label || children}</span>}
+      </label>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;

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

@@ -0,0 +1,131 @@
+import * as React from 'react';
+
+export interface CommandPaletteItem {
+  title: string;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  kbd?: string;
+  action?: () => void;
+}
+
+export interface CommandPaletteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  items?: CommandPaletteItem[];
+  isOpen?: boolean;
+  onClose?: () => void;
+  onSelect?: (item: CommandPaletteItem) => void;
+  placeholder?: string;
+}
+
+export const CommandPalette: React.FC<CommandPaletteProps> = ({
+  items = [],
+  isOpen = false,
+  onClose,
+  onSelect,
+  placeholder = 'Search commands...',
+  className = '',
+  ...props
+}) => {
+  const [query, setQuery] = React.useState('');
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const filtered = items.filter(
+    (item) =>
+      item.title.toLowerCase().includes(query.toLowerCase()) ||
+      (item.subtitle && item.subtitle.toLowerCase().includes(query.toLowerCase()))
+  );
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setQuery('');
+      setActiveIndex(0);
+      setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [isOpen]);
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      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: CommandPaletteItem) => {
+    item.action?.();
+    onSelect?.(item);
+    onClose?.();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={`cn-command-palette cn-command-palette-open ${className}`.trim()}
+      onClick={(e) => e.target === e.currentTarget && onClose?.()}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Command palette"
+      {...props}
+    >
+      <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);
+          }}
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded={filtered.length > 0}
+        />
+        <div className="cn-command-palette-results" role="listbox">
+          {filtered.length > 0 ? (
+            filtered.map((item, idx) => (
+              <div
+                key={idx}
+                className={`cn-command-item ${idx === activeIndex ? 'cn-command-item-active' : ''}`.trim()}
+                onClick={() => handleSelect(item)}
+                onMouseEnter={() => setActiveIndex(idx)}
+                role="option"
+                aria-selected={idx === activeIndex}
+              >
+                {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 className="cn-command-empty">No commands found</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CommandPalette.displayName = 'CommandPalette';
+
+export default CommandPalette;

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'fluid';
+
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: ContainerSize;
+}
+
+export const Container: React.FC<ContainerProps> = ({
+  size = 'md',
+  children,
+  className = '',
+  ...props
+}) => {
+  const sizeClass = size !== 'md' ? `cn-container-${size}` : '';
+
+  return (
+    <div className={`cn-container ${sizeClass} ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  );
+};
+
+Container.displayName = 'Container';
+
+export default Container;

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

@@ -0,0 +1,88 @@
+import * as React from 'react';
+
+export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+  trigger: React.ReactNode;
+}
+
+export interface DropdownItemProps extends React.HTMLAttributes<HTMLDivElement | HTMLButtonElement> {
+  icon?: React.ReactNode;
+  divider?: boolean;
+}
+
+export const Dropdown: React.FC<DropdownProps> & {
+  Item: React.FC<DropdownItemProps>;
+  Divider: React.FC;
+} = Object.assign(
+  ({ trigger, children, className = '', ...props }: DropdownProps) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const dropdownRef = React.useRef<HTMLDivElement>(null);
+
+    const toggle = () => setIsOpen((prev) => !prev);
+    const close = () => setIsOpen(false);
+
+    React.useEffect(() => {
+      const handleClickOutside = (e: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+          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}`.trim()}
+        {...props}
+      >
+        <div
+          className="cn-dropdown-trigger"
+          onClick={toggle}
+          role="button"
+          aria-haspopup="true"
+          aria-expanded={isOpen}
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              toggle();
+            }
+          }}
+        >
+          {trigger}
+        </div>
+        <div className="cn-dropdown-menu" role="menu" onClick={close}>
+          {children}
+        </div>
+      </div>
+    );
+  },
+  {
+    Item: ({ children, icon, onClick, className = '', ...props }: DropdownItemProps) => (
+      <div
+        className={`cn-dropdown-item ${className}`.trim()}
+        onClick={onClick}
+        role="menuitem"
+        tabIndex={0}
+        {...props}
+      >
+        {icon && <span className="cn-dropdown-item-icon">{icon}</span>}
+        {children}
+      </div>
+    ),
+    Divider: () => <div className="cn-dropdown-divider" role="separator" />,
+  }
+);
+
+Dropdown.displayName = 'Dropdown';
+Dropdown.Item.displayName = 'Dropdown.Item';
+Dropdown.Divider.displayName = 'Dropdown.Divider';
+
+export default Dropdown;

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;