cronixui 1.0.5 → 1.1.0

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

@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: AlertVariant;
+  title?: string;
+  dismissible?: boolean;
+  onClose?: () => void;
+}
+
+export const Alert: React.FC<AlertProps> = ({
+  variant = 'info',
+  title,
+  children,
+  dismissible = true,
+  onClose,
+  className = '',
+  ...props
+}) => {
+  const [visible, setVisible] = React.useState(true);
+
+  const handleClose = () => {
+    setVisible(false);
+    onClose?.();
+  };
+
+  if (!visible) return null;
+
+  const icons: Record<AlertVariant, React.ReactNode> = {
+    success: <polyline points="20 6 9 17 4 12" />,
+    error: (
+      <>
+        <circle cx="12" cy="12" r="10" />
+        <line x1="15" y1="9" x2="9" y2="15" />
+        <line x1="9" y1="9" x2="15" y2="15" />
+      </>
+    ),
+    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" />
+        <line x1="12" y1="9" x2="12" y2="13" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+      </>
+    ),
+    info: (
+      <>
+        <circle cx="12" cy="12" r="10" />
+        <line x1="12" y1="16" x2="12" y2="12" />
+        <line x1="12" y1="8" x2="12.01" y2="8" />
+      </>
+    ),
+  };
+
+  return (
+    <div className={`cn-alert cn-alert-${variant} ${className}`.trim()} role="alert" {...props}>
+      <div className="cn-alert-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          {icons[variant]}
+        </svg>
+      </div>
+      <div className="cn-alert-content">
+        {title && <div className="cn-alert-title">{title}</div>}
+        <div className="cn-alert-message">{children}</div>
+      </div>
+      {dismissible && (
+        <button className="cn-alert-close" onClick={handleClose} aria-label="Close">
+          <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 x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};
+
+Alert.displayName = 'Alert';
+
+export default Alert;

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  src?: string;
+  alt?: string;
+  initials?: string;
+  size?: AvatarSize;
+}
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  max?: number;
+}
+
+export const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt = '',
+  initials,
+  size = 'md',
+  className = '',
+  ...props
+}) => {
+  const sizeClass = size !== 'md' ? `cn-avatar-${size}` : '';
+
+  return (
+    <div className={`cn-avatar ${sizeClass} ${className}`.trim()} {...props}>
+      {src ? (
+        <img src={src} alt={alt} />
+      ) : initials ? (
+        initials
+      ) : null}
+    </div>
+  );
+};
+
+Avatar.displayName = 'Avatar';
+
+export const AvatarGroup: React.FC<AvatarGroupProps> = ({ children, max, className = '', ...props }) => {
+  const items = React.Children.toArray(children);
+  const visible = max ? items.slice(0, max) : items;
+  const remaining = max ? items.length - max : 0;
+
+  return (
+    <div className={`cn-avatar-group ${className}`.trim()} {...props}>
+      {visible}
+      {remaining > 0 && <div className="cn-avatar">+{remaining}</div>}
+    </div>
+  );
+};
+
+AvatarGroup.displayName = 'AvatarGroup';
+
+export default Avatar;

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+export type BadgeVariant = 'default' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  solid?: boolean;
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  variant = 'default',
+  solid = false,
+  className = '',
+  ...props
+}) => {
+  const variantClass = variant !== 'default' ? `cn-badge-${variant}` : '';
+  const solidClass = solid ? 'cn-badge-solid' : '';
+
+  return (
+    <span
+      className={`cn-badge ${variantClass} ${solidClass} ${className}`.trim()}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
+
+Badge.displayName = 'Badge';
+
+export default Badge;

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;