cronixui 1.1.1 → 1.1.3

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

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

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

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