cronixui 1.1.2 → 1.1.3

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

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

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

@@ -1,69 +1,69 @@
-import * as React from 'react';
-
-export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
-  spacing?: '1' | '2' | '4' | '6';
-}
-
-export const Stack: React.FC<StackProps> = ({
-  children,
-  spacing = '4',
-  className = '',
-  ...props
-}) => {
-  return (
-    <div
-      className={`cn-stack cn-stack-${spacing} ${className}`.trim()}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-
-Stack.displayName = 'Stack';
-
-export const HStack: React.FC<StackProps> = ({
-  children,
-  spacing = '4',
-  className = '',
-  ...props
-}) => {
-  return (
-    <div
-      className={`cn-hstack cn-hstack-${spacing} ${className}`.trim()}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-
-HStack.displayName = 'HStack';
-
-export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
-  orientation?: 'horizontal' | 'vertical';
-}
-
-export const Divider: React.FC<DividerProps> = ({
-  className = '',
-  orientation = 'horizontal',
-  style,
-  ...props
-}) => {
-  const dividerStyle: React.CSSProperties = orientation === 'vertical'
-    ? { width: '1px', height: 'auto', minHeight: '100%', borderRight: 'none', borderBottom: '1px solid var(--cn-border)', ...style }
-    : { height: '1px', border: 'none', backgroundColor: 'var(--cn-border)', ...style };
-
-  return (
-    <hr
-      className={`cn-divider ${className}`.trim()}
-      style={dividerStyle}
-      role="separator"
-      {...props}
-    />
-  );
-};
-
-Divider.displayName = 'Divider';
-
-export default Stack;
+import * as React from 'react';
+
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+  spacing?: '1' | '2' | '4' | '6';
+}
+
+export const Stack: React.FC<StackProps> = ({
+  children,
+  spacing = '4',
+  className = '',
+  ...props
+}) => {
+  return (
+    <div
+      className={`cn-stack cn-stack-${spacing} ${className}`.trim()}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+Stack.displayName = 'Stack';
+
+export const HStack: React.FC<StackProps> = ({
+  children,
+  spacing = '4',
+  className = '',
+  ...props
+}) => {
+  return (
+    <div
+      className={`cn-hstack cn-hstack-${spacing} ${className}`.trim()}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+HStack.displayName = 'HStack';
+
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export const Divider: React.FC<DividerProps> = ({
+  className = '',
+  orientation = 'horizontal',
+  style,
+  ...props
+}) => {
+  const dividerStyle: React.CSSProperties = orientation === 'vertical'
+    ? { width: '1px', height: 'auto', minHeight: '100%', borderRight: 'none', borderBottom: '1px solid var(--cn-border)', ...style }
+    : { height: '1px', border: 'none', backgroundColor: 'var(--cn-border)', ...style };
+
+  return (
+    <hr
+      className={`cn-divider ${className}`.trim()}
+      style={dividerStyle}
+      role="separator"
+      {...props}
+    />
+  );
+};
+
+Divider.displayName = 'Divider';
+
+export default Stack;

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

@@ -1,90 +1,90 @@
-import * as React from 'react';
-
-export interface TableColumn<T = Record<string, unknown>> {
-  key: string;
-  header: string;
-  sortable?: boolean;
-  render?: (row: T) => React.ReactNode;
-}
-
-export interface TableProps<T = Record<string, unknown>> extends React.HTMLAttributes<HTMLDivElement> {
-  columns: TableColumn<T>[];
-  data: T[];
-  sortable?: boolean;
-  onSort?: (key: string) => void;
-}
-
-export function Table<T extends Record<string, unknown> = Record<string, unknown>>({
-  columns = [],
-  data = [],
-  sortable = false,
-  onSort,
-  className = '',
-  ...props
-}: TableProps<T>): React.ReactElement {
-  const [sortState, setSortState] = React.useState<Record<string, 'none' | 'ascending' | 'descending'>>(
-    Object.fromEntries(columns.map((col) => [col.key, 'none']))
-  );
-
-  const handleSort = (column: TableColumn<T>) => {
-    if (!sortable || !column.sortable) return;
-
-    const next: Record<string, 'none' | 'ascending' | 'descending'> = {};
-    columns.forEach((col) => {
-      next[col.key] = 'none';
-    });
-
-    const current = sortState[column.key] ?? 'none';
-    if (current === 'none') {
-      next[column.key] = 'ascending';
-    } else if (current === 'ascending') {
-      next[column.key] = 'descending';
-    } else {
-      next[column.key] = 'none';
-    }
-
-    setSortState(next);
-    onSort?.(column.key);
-  };
-
-  return (
-    <div className={`cn-table-wrapper ${sortable ? 'cn-table-sortable' : ''} ${className}`.trim()} {...props}>
-      <table className="cn-table">
-        <thead>
-          <tr>
-            {columns.map((col, idx) => {
-              const sortDirection = sortState[col.key] ?? 'none';
-              const sortIndicator = sortDirection === 'ascending' ? ' ↑' : sortDirection === 'descending' ? ' ↓' : col.sortable ? ' ↕' : '';
-              return (
-                <th
-                  key={idx}
-                  onClick={() => handleSort(col)}
-                  data-sort={col.key}
-                  aria-sort={col.sortable ? sortDirection : undefined}
-                >
-                  {col.header}
-                  {sortIndicator}
-                </th>
-              );
-            })}
-          </tr>
-        </thead>
-        <tbody>
-          {data.map((row, idx) => (
-            <tr key={idx}>
-              {columns.map((col, colIdx) => (
-                <td key={colIdx}>
-                  {col.render ? col.render(row) : (row as Record<string, unknown>)[col.key] as React.ReactNode}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-Table.displayName = 'Table';
-
-export default Table;
+import * as React from 'react';
+
+export interface TableColumn<T = Record<string, unknown>> {
+  key: string;
+  header: string;
+  sortable?: boolean;
+  render?: (row: T) => React.ReactNode;
+}
+
+export interface TableProps<T = Record<string, unknown>> extends React.HTMLAttributes<HTMLDivElement> {
+  columns: TableColumn<T>[];
+  data: T[];
+  sortable?: boolean;
+  onSort?: (key: string) => void;
+}
+
+export function Table<T extends Record<string, unknown> = Record<string, unknown>>({
+  columns = [],
+  data = [],
+  sortable = false,
+  onSort,
+  className = '',
+  ...props
+}: TableProps<T>): React.ReactElement {
+  const [sortState, setSortState] = React.useState<Record<string, 'none' | 'ascending' | 'descending'>>(
+    Object.fromEntries(columns.map((col) => [col.key, 'none']))
+  );
+
+  const handleSort = (column: TableColumn<T>) => {
+    if (!sortable || !column.sortable) return;
+
+    const next: Record<string, 'none' | 'ascending' | 'descending'> = {};
+    columns.forEach((col) => {
+      next[col.key] = 'none';
+    });
+
+    const current = sortState[column.key] ?? 'none';
+    if (current === 'none') {
+      next[column.key] = 'ascending';
+    } else if (current === 'ascending') {
+      next[column.key] = 'descending';
+    } else {
+      next[column.key] = 'none';
+    }
+
+    setSortState(next);
+    onSort?.(column.key);
+  };
+
+  return (
+    <div className={`cn-table-wrapper ${sortable ? 'cn-table-sortable' : ''} ${className}`.trim()} {...props}>
+      <table className="cn-table">
+        <thead>
+          <tr>
+            {columns.map((col, idx) => {
+              const sortDirection = sortState[col.key] ?? 'none';
+              const sortIndicator = sortDirection === 'ascending' ? ' ↑' : sortDirection === 'descending' ? ' ↓' : col.sortable ? ' ↕' : '';
+              return (
+                <th
+                  key={idx}
+                  onClick={() => handleSort(col)}
+                  data-sort={col.key}
+                  aria-sort={col.sortable ? sortDirection : undefined}
+                >
+                  {col.header}
+                  {sortIndicator}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, idx) => (
+            <tr key={idx}>
+              {columns.map((col, colIdx) => (
+                <td key={colIdx}>
+                  {col.render ? col.render(row) : (row as Record<string, unknown>)[col.key] as React.ReactNode}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+Table.displayName = 'Table';
+
+export default Table;