cronixui 1.0.6 → 1.1.0

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;

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

@@ -0,0 +1,134 @@
+import * as React from 'react';
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+export interface ToastOptions {
+  id?: number;
+  title?: string;
+  message: string;
+  type?: ToastType;
+  duration?: number;
+  closable?: boolean;
+}
+
+export interface ToastProps {
+  toasts: ToastOptions[];
+  onRemove: (id: number) => void;
+}
+
+export interface UseToastReturn {
+  toasts: ToastOptions[];
+  toast: {
+    success: (message: string, title?: string) => number;
+    error: (message: string, title?: string) => number;
+    warning: (message: string, title?: string) => number;
+    info: (message: string, title?: string) => number;
+    show: (options: ToastOptions) => number;
+    remove: (id: number) => void;
+  };
+  removeToast: (id: number) => void;
+}
+
+const ToastItem: React.FC<{ toast: ToastOptions; onRemove: (id: number) => void }> = ({ toast, onRemove }) => {
+  const [isLeaving, setIsLeaving] = React.useState(false);
+
+  React.useEffect(() => {
+    if (toast.duration && toast.duration > 0) {
+      const timer = setTimeout(() => handleRemove(toast.id!), toast.duration);
+      return () => clearTimeout(timer);
+    }
+  }, [toast.id, toast.duration]);
+
+  const handleRemove = (id: number) => {
+    setIsLeaving(true);
+    setTimeout(() => onRemove(id), 200);
+  };
+
+  const icons: Record<ToastType, 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-toast cn-toast-${toast.type} ${isLeaving ? 'cn-toast-leaving' : ''}`.trim()} role="alert">
+      <div className="cn-alert-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          {icons[toast.type || 'info']}
+        </svg>
+      </div>
+      <div className="cn-alert-content">
+        {toast.title && <div className="cn-alert-title">{toast.title}</div>}
+        {toast.message && <div className="cn-alert-message">{toast.message}</div>}
+      </div>
+      {toast.closable && (
+        <button className="cn-alert-close" onClick={() => handleRemove(toast.id!)} 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>
+  );
+};
+
+export const Toast: React.FC<ToastProps> = ({ toasts = [], onRemove }) => {
+  return (
+    <div className="cn-toast-container">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onRemove={onRemove} />
+      ))}
+    </div>
+  );
+};
+
+Toast.displayName = 'Toast';
+
+export function useToast(): UseToastReturn {
+  const [toasts, setToasts] = React.useState<ToastOptions[]>([]);
+  const idRef = React.useRef(0);
+
+  const addToast = (options: ToastOptions): number => {
+    const id = ++idRef.current;
+    const toast: ToastOptions = { id, duration: 4000, closable: true, type: 'info', ...options };
+    setToasts((prev) => [...prev, toast]);
+    return id;
+  };
+
+  const removeToast = (id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  const toast = {
+    success: (message: string, title?: string) => addToast({ message, title, type: 'success' }),
+    error: (message: string, title?: string) => addToast({ message, title, type: 'error' }),
+    warning: (message: string, title?: string) => addToast({ message, title, type: 'warning' }),
+    info: (message: string, title?: string) => addToast({ message, title, type: 'info' }),
+    show: addToast,
+    remove: removeToast,
+  };
+
+  return { toasts, toast, removeToast };
+}
+
+export default Toast;

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+export type ToggleSize = 'sm' | 'md' | 'lg';
+
+export interface ToggleProps extends React.HTMLAttributes<HTMLDivElement> {
+  on?: boolean;
+  onChange?: (on: boolean) => void;
+  disabled?: boolean;
+  size?: ToggleSize;
+  label?: React.ReactNode;
+}
+
+export const Toggle: React.FC<ToggleProps> = ({
+  on: controlledOn,
+  onChange,
+  disabled = false,
+  size = 'md',
+  label,
+  className = '',
+  ...props
+}) => {
+  const [internalOn, setInternalOn] = React.useState(false);
+  const isOn = controlledOn !== undefined ? controlledOn : internalOn;
+
+  const handleToggle = () => {
+    if (disabled) return;
+    if (onChange) {
+      onChange(!controlledOn);
+    } else {
+      setInternalOn(!internalOn);
+    }
+  };
+
+  const sizeClass = size === 'sm' ? 'cn-toggle-sm' : size === 'lg' ? 'cn-toggle-lg' : '';
+
+  return (
+    <label className={`cn-toggle-wrapper ${className}`.trim()} {...props}>
+      <div
+        className={`cn-toggle ${isOn ? 'on' : ''} ${sizeClass} ${disabled ? 'disabled' : ''}`.trim()}
+        onClick={handleToggle}
+        role="switch"
+        aria-checked={isOn}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleToggle();
+          }
+        }}
+      />
+      {label && <span className="cn-toggle-label">{label}</span>}
+    </label>
+  );
+};
+
+Toggle.displayName = 'Toggle';
+
+export default Toggle;

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+  content: React.ReactNode;
+  position?: TooltipPosition;
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  content,
+  position = 'top',
+  className = '',
+  ...props
+}) => {
+  const positionClass = position !== 'top' ? `cn-tooltip-${position}` : '';
+
+  return (
+    <div className={`cn-tooltip ${positionClass} ${className}`.trim()} {...props}>
+      {children}
+      <div className="cn-tooltip-content" role="tooltip">
+        {content}
+      </div>
+    </div>
+  );
+};
+
+Tooltip.displayName = 'Tooltip';
+
+export default Tooltip;

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+export const H1: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({ className = '', ...props }) => (
+  <h1 className={`cn-h1 ${className}`.trim()} {...props} />
+);
+H1.displayName = 'H1';
+
+export const H2: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({ className = '', ...props }) => (
+  <h2 className={`cn-h2 ${className}`.trim()} {...props} />
+);
+H2.displayName = 'H2';
+
+export const H3: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({ className = '', ...props }) => (
+  <h3 className={`cn-h3 ${className}`.trim()} {...props} />
+);
+H3.displayName = 'H3';
+
+export const H4: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({ className = '', ...props }) => (
+  <h4 className={`cn-h4 ${className}`.trim()} {...props} />
+);
+H4.displayName = 'H4';
+
+export const H5: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({ className = '', ...props }) => (
+  <h5 className={`cn-h5 ${className}`.trim()} {...props} />
+);
+H5.displayName = 'H5';
+
+export const H6: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({ className = '', ...props }) => (
+  <h6 className={`cn-h6 ${className}`.trim()} {...props} />
+);
+H6.displayName = 'H6';
+
+export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  variant?: 'muted' | 'dim' | 'accent' | 'mono';
+  size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl';
+}
+
+export const Text: React.FC<TextProps> = ({
+  variant,
+  size,
+  className = '',
+  ...props
+}) => {
+  const variantClass = variant ? `cn-text-${variant}` : '';
+  const sizeClass = size ? `cn-text-${size}` : '';
+
+  return (
+    <p className={`cn-text-base ${variantClass} ${sizeClass} ${className}`.trim()} {...props} />
+  );
+};
+
+Text.displayName = 'Text';
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+export const Label: React.FC<LabelProps> = ({ className = '', ...props }) => (
+  <label className={`cn-label ${className}`.trim()} {...props} />
+);
+
+Label.displayName = 'Label';
+
+export default H1;