cronixui 1.1.2 → 1.1.3

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

@@ -1,86 +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;
+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/FormGroup.tsx

@@ -1,36 +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;
+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/List.tsx

@@ -1,55 +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;
+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/Pagination.tsx

@@ -1,107 +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;
+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

@@ -1,49 +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;
+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;