cronixui 1.0.6 → 1.1.0

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;

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

@@ -0,0 +1,95 @@
+import * as React from 'react';
+
+export interface SearchItem {
+  title: string;
+  subtitle?: string;
+}
+
+export interface SearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  items?: SearchItem[];
+  placeholder?: string;
+  onSelect?: (item: SearchItem) => void;
+}
+
+export const Search: React.FC<SearchProps> = ({
+  items = [],
+  placeholder = 'Search...',
+  onSelect,
+  className = '',
+  ...props
+}) => {
+  const [query, setQuery] = React.useState('');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const filtered = items.filter(
+    (item) =>
+      item.title.toLowerCase().includes(query.toLowerCase()) ||
+      (item.subtitle && item.subtitle.toLowerCase().includes(query.toLowerCase()))
+  );
+
+  React.useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, []);
+
+  const handleSelect = (item: SearchItem) => {
+    setQuery(item.title);
+    setIsOpen(false);
+    onSelect?.(item);
+  };
+
+  return (
+    <div ref={ref} className={`cn-search ${isOpen ? 'cn-search-open' : ''} ${className}`.trim()} {...props}>
+      <svg className="cn-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="11" cy="11" r="8" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+      </svg>
+      <input
+        type="search"
+        className="cn-input cn-search-input"
+        placeholder={placeholder}
+        value={query}
+        onChange={(e) => {
+          setQuery(e.target.value);
+          setIsOpen(true);
+        }}
+        onFocus={() => setIsOpen(true)}
+        role="combobox"
+        aria-autocomplete="list"
+        aria-expanded={isOpen}
+      />
+      {isOpen && (
+        <div className="cn-search-results" role="listbox">
+          {filtered.length > 0 ? (
+            filtered.map((item, idx) => (
+              <div
+                key={idx}
+                className="cn-search-result"
+                onClick={() => handleSelect(item)}
+                role="option"
+              >
+                <div className="cn-search-result-title">{item.title}</div>
+                {item.subtitle && (
+                  <div className="cn-search-result-subtitle">{item.subtitle}</div>
+                )}
+              </div>
+            ))
+          ) : (
+            <div className="cn-search-empty">No results found</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+Search.displayName = 'Search';
+
+export default Search;

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> {
+  options: SelectOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ options = [], value, onChange, placeholder = 'Select...', disabled = false, className = '', ...props }, ref) => {
+    return (
+      <div className={`cn-select-wrapper ${className}`.trim()}>
+        <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>
+    );
+  }
+);
+
+Select.displayName = 'Select';
+
+export default Select;

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+export interface SidebarItemProps extends React.HTMLAttributes<HTMLAnchorElement | HTMLDivElement> {
+  active?: boolean;
+  icon?: React.ReactNode;
+  href?: string;
+}
+
+export const Sidebar: React.FC<SidebarProps> & {
+  Item: React.FC<SidebarItemProps>;
+} = Object.assign(
+  ({ header, footer, children, className = '', ...props }: SidebarProps) => {
+    return (
+      <aside className={`cn-sidebar ${className}`.trim()} {...props}>
+        {header && <div className="cn-sidebar-header">{header}</div>}
+        <div className="cn-sidebar-nav">{children}</div>
+        {footer && <div className="cn-sidebar-footer">{footer}</div>}
+      </aside>
+    );
+  },
+  {
+    Item: ({ children, active = false, icon, href, className = '', ...props }: SidebarItemProps) => {
+      const content = (
+        <>
+          {icon && <span className="cn-sidebar-item-icon">{icon}</span>}
+          {children}
+        </>
+      );
+
+      if (href) {
+        return (
+          <a
+            href={href}
+            className={`cn-sidebar-item ${active ? 'cn-sidebar-active' : ''} ${className}`.trim()}
+            role="menuitem"
+            {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+          >
+            {content}
+          </a>
+        );
+      }
+
+      return (
+        <div
+          className={`cn-sidebar-item ${active ? 'cn-sidebar-active' : ''} ${className}`.trim()}
+          role="menuitem"
+          {...(props as React.HTMLAttributes<HTMLDivElement>)}
+        >
+          {content}
+        </div>
+      );
+    },
+  }
+);
+
+Sidebar.displayName = 'Sidebar';
+(Sidebar.Item as React.FC<SidebarItemProps> & { displayName?: string }).displayName = 'SidebarItem';
+
+export default Sidebar;

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+export type SkeletonVariant = 'text' | 'title' | 'avatar' | 'rect';
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: SkeletonVariant;
+  width?: string | number;
+  height?: string | number;
+}
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+  variant = 'text',
+  width,
+  height,
+  className = '',
+  style,
+  ...props
+}) => {
+  const variantClass = variant !== 'text' ? `cn-skeleton-${variant}` : 'cn-skeleton';
+
+  const mergedStyle: React.CSSProperties = {
+    width: width,
+    height: height,
+    ...style,
+  };
+
+  return (
+    <div
+      className={`${variantClass} ${className}`.trim()}
+      style={mergedStyle}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+};
+
+Skeleton.displayName = 'Skeleton';
+
+export default Skeleton;