cronixui 1.0.5 → 1.1.0

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;

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChange?: (value: number) => void;
+}
+
+export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+  ({ value = 0, min = 0, max = 100, step = 1, onChange, disabled = false, className = '', ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        type="range"
+        className={`cn-slider ${className}`.trim()}
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(e) => onChange?.(Number(e.target.value))}
+        disabled={disabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Slider.displayName = 'Slider';
+
+export default Slider;

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: SpinnerSize;
+}
+
+export const Spinner: React.FC<SpinnerProps> = ({ size = 'md', className = '', ...props }) => {
+  const sizeClass = size !== 'md' ? `cn-spinner-${size}` : '';
+
+  return (
+    <div
+      className={`cn-spinner ${sizeClass} ${className}`.trim()}
+      role="status"
+      aria-label="Loading"
+      {...props}
+    />
+  );
+};
+
+Spinner.displayName = 'Spinner';
+
+export default Spinner;

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

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

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+export type StatDeltaType = 'up' | 'down';
+
+export interface StatProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: React.ReactNode;
+  label?: string;
+  delta?: string;
+  deltaType?: StatDeltaType;
+}
+
+export const Stat: React.FC<StatProps> = ({
+  value,
+  label,
+  delta,
+  deltaType = 'up',
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`cn-stat ${className}`.trim()} {...props}>
+      <div className="cn-stat-value">{value}</div>
+      {label && <div className="cn-stat-label">{label}</div>}
+      {delta && (
+        <div className={`cn-stat-delta cn-stat-delta-${deltaType}`.trim()}>
+          {deltaType === 'up' ? '↑' : '↓'} {delta}
+        </div>
+      )}
+    </div>
+  );
+};
+
+Stat.displayName = 'Stat';
+
+export default Stat;

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

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

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

@@ -0,0 +1,85 @@
+import * as React from 'react';
+
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  defaultIndex?: number;
+  index?: number;
+  onChange?: (index: number) => void;
+}
+
+export interface TabProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const Tabs: React.FC<TabsProps> & {
+  Tab: React.FC<TabProps>;
+  Panel: React.FC<TabPanelProps>;
+} = Object.assign(
+  ({ defaultIndex = 0, index: controlledIndex, onChange, children, className = '', ...props }: TabsProps) => {
+    const [internalIndex, setInternalIndex] = React.useState(defaultIndex);
+    const activeIndex = controlledIndex !== undefined ? controlledIndex : internalIndex;
+
+    const handleTabClick = (idx: number) => {
+      if (onChange) {
+        onChange(idx);
+      } else {
+        setInternalIndex(idx);
+      }
+    };
+
+    const tabs: React.ReactElement<TabProps>[] = [];
+    const panels: React.ReactElement<TabPanelProps>[] = [];
+
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        if ((child.type as React.FC).displayName === 'Tab') {
+          tabs.push(child as React.ReactElement<TabProps>);
+        } else if ((child.type as React.FC).displayName === 'TabPanel') {
+          panels.push(child as React.ReactElement<TabPanelProps>);
+        }
+      }
+    });
+
+    return (
+      <div className={className} {...props}>
+        <div className="cn-tabs">
+          {tabs.map((tab, idx) => (
+            <div
+              key={idx}
+              className={`cn-tab ${activeIndex === idx ? 'cn-tab-active' : ''}`.trim()}
+              onClick={() => handleTabClick(idx)}
+              role="tab"
+              aria-selected={activeIndex === idx}
+              tabIndex={0}
+            >
+              {tab.props.children}
+            </div>
+          ))}
+        </div>
+        {panels.map((panel, idx) => (
+          <div
+            key={idx}
+            className={`cn-tab-panel ${activeIndex === idx ? 'cn-tab-panel-active' : ''}`.trim()}
+            role="tabpanel"
+            hidden={activeIndex !== idx}
+          >
+            {panel.props.children}
+          </div>
+        ))}
+      </div>
+    );
+  },
+  {
+    Tab: ({ children }: TabProps) => <>{children}</>,
+    Panel: ({ children }: TabPanelProps) => <>{children}</>,
+  }
+);
+
+Tabs.displayName = 'Tabs';
+(Tabs.Tab as React.FC<TabProps> & { displayName?: string }).displayName = 'Tab';
+(Tabs.Panel as React.FC<TabPanelProps> & { displayName?: string }).displayName = 'TabPanel';
+
+export default Tabs;

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+  onRemove?: () => void;
+}
+
+export const Tag: React.FC<TagProps> = ({
+  children,
+  onRemove,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`cn-tag ${className}`.trim()} {...props}>
+      <span>{children}</span>
+      {onRemove && (
+        <button className="cn-tag-remove" onClick={onRemove} aria-label="Remove">
+          <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>
+  );
+};
+
+Tag.displayName = 'Tag';
+
+export default Tag;

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: boolean;
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ error = false, className = '', ...props }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        className={`cn-input cn-textarea ${error ? 'cn-input-error' : ''} ${className}`.trim()}
+        {...props}
+      />
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
+
+export default Textarea;