cronixui 1.0.0 → 1.0.2

package/packages/react/src/components/Radio.jsx

@@ -0,0 +1,50 @@
+import { forwardRef } from 'react';
+
+const Radio = forwardRef(function Radio({ 
+  checked = false, 
+  onChange, 
+  disabled = false,
+  children,
+  name,
+  className = '',
+  ...props 
+}, ref) {
+  return (
+    <label className={`cn-radio ${disabled ? 'disabled' : ''} ${className}`}>
+      <input
+        ref={ref}
+        type="radio"
+        checked={checked}
+        onChange={(e) => onChange?.(e.target.checked)}
+        disabled={disabled}
+        name={name}
+        {...props}
+      />
+      <span className="cn-radio-box"></span>
+      {children && <span className="cn-radio-label">{children}</span>}
+    </label>
+  );
+});
+
+export function RadioGroup({ children, name, value, onChange, className = '' }) {
+  return (
+    <div className={className} role="radiogroup">
+      {children.map((child, idx) => {
+        if (child.type?.displayName === 'Radio') {
+          return {
+            ...child,
+            props: {
+              ...child.props,
+              name,
+              checked: child.props.value === value,
+              onChange: () => onChange?.(child.props.value),
+            }
+          };
+        }
+        return child;
+      })}
+    </div>
+  );
+}
+
+export default Radio;

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

@@ -0,0 +1,70 @@
+import { useState, useEffect, useRef } from 'react';
+
+export default function Search({ 
+  items = [],
+  placeholder = 'Search...',
+  onSelect,
+  className = '' 
+}) {
+  const [query, setQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef(null);
+
+  const filtered = items.filter(item =>
+    item.title.toLowerCase().includes(query.toLowerCase()) ||
+    (item.subtitle && item.subtitle.toLowerCase().includes(query.toLowerCase()))
+  );
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, []);
+
+  const handleSelect = (item) => {
+    setQuery(item.title);
+    setIsOpen(false);
+    onSelect?.(item);
+  };
+
+  return (
+    <div ref={ref} className={`cn-search ${isOpen ? 'cn-search-open' : ''} ${className}`}>
+      <svg className="cn-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="11" cy="11" r="8"></circle>
+        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      </svg>
+      <input
+        type="text"
+        className="cn-input cn-search-input"
+        placeholder={placeholder}
+        value={query}
+        onChange={(e) => {
+          setQuery(e.target.value);
+          setIsOpen(true);
+        }}
+        onFocus={() => setIsOpen(true)}
+      />
+      {isOpen && filtered.length > 0 && (
+        <div className="cn-search-results">
+          {filtered.map((item, idx) => (
+            <div
+              key={idx}
+              className="cn-search-result"
+              onClick={() => handleSelect(item)}
+            >
+              <div className="cn-search-result-title">{item.title}</div>
+              {item.subtitle && (
+                <div className="cn-search-result-subtitle">{item.subtitle}</div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/packages/react/src/components/Select.jsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react';
+
+const Select = forwardRef(function Select({ 
+  options = [],
+  value,
+  onChange,
+  placeholder = 'Select...',
+  disabled = false,
+  className = '',
+  ...props 
+}, ref) {
+  return (
+    <div className={`cn-select-wrapper ${className}`}>
+      <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>
+  );
+});
+
+export default Select;

package/packages/react/src/components/Skeleton.jsx

@@ -0,0 +1,15 @@
+export default function Skeleton({ 
+  variant = 'text', 
+  width,
+  height,
+  className = '' 
+}) {
+  const variantClass = variant !== 'text' ? `cn-skeleton-${variant}` : 'cn-skeleton';
+
+  const style = {
+    width: width,
+    height: height,
+  };
+
+  return <div className={`${variantClass} ${className}`} style={style}></div>;
+}

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

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+
+const Slider = forwardRef(function Slider({ 
+  value = 0, 
+  min = 0, 
+  max = 100, 
+  step = 1,
+  onChange,
+  disabled = false,
+  className = '',
+  ...props 
+}, ref) {
+  return (
+    <input
+      ref={ref}
+      type="range"
+      className={`cn-slider ${className}`}
+      value={value}
+      min={min}
+      max={max}
+      step={step}
+      onChange={(e) => onChange?.(Number(e.target.value))}
+      disabled={disabled}
+      {...props}
+    />
+  );
+});
+
+export default Slider;

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

@@ -0,0 +1,5 @@
+export default function Spinner({ size = 'md', className = '' }) {
+  const sizeClass = size !== 'md' ? `cn-spinner-${size}` : '';
+
+  return <div className={`cn-spinner ${sizeClass} ${className}`}></div>;
+}

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

@@ -0,0 +1,19 @@
+export default function Stat({ 
+  value, 
+  label,
+  delta,
+  deltaType = 'up',
+  className = '' 
+}) {
+  return (
+    <div className={`cn-stat ${className}`}>
+      <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}`}>
+          {deltaType === 'up' ? '↑' : '↓'} {delta}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+
+const Table = forwardRef(function Table({ 
+  columns = [], 
+  data = [],
+  sortable = false,
+  onSort,
+  className = '' 
+}, ref) {
+  const handleSort = (column) => {
+    if (!sortable || !column.sortable) return;
+    onSort?.(column.key);
+  };
+
+  return (
+    <div className={`cn-table-wrapper ${sortable ? 'cn-table-sortable' : ''} ${className}`}>
+      <table className="cn-table" ref={ref}>
+        <thead>
+          <tr>
+            {columns.map((col, idx) => (
+              <th 
+                key={idx}
+                onClick={() => handleSort(col)}
+                data-sort={col.key}
+              >
+                {col.header}
+                {col.sortable && ' ↕'}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, idx) => (
+            <tr key={idx}>
+              {columns.map((col, colIdx) => (
+                <td key={colIdx}>
+                  {col.render ? col.render(row) : row[col.key]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+});
+
+export default Table;

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

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+
+export default function Tabs({ 
+  defaultIndex = 0, 
+  index: controlledIndex, 
+  onChange, 
+  children,
+  className = '' 
+}) {
+  const [internalIndex, setInternalIndex] = useState(defaultIndex);
+  const activeIndex = controlledIndex !== undefined ? controlledIndex : internalIndex;
+
+  const handleTabClick = (idx) => {
+    if (onChange) {
+      onChange(idx);
+    } else {
+      setInternalIndex(idx);
+    }
+  };
+
+  const tabs = [];
+  const panels = [];
+
+  children.forEach((child) => {
+    if (child.type?.displayName === 'Tab') {
+      tabs.push(child);
+    } else if (child.type?.displayName === 'TabPanel') {
+      panels.push(child);
+    }
+  });
+
+  return (
+    <div className={className}>
+      <div className="cn-tabs">
+        {tabs.map((tab, idx) => (
+          <div
+            key={idx}
+            className={`cn-tab ${activeIndex === idx ? 'cn-tab-active' : ''}`}
+            onClick={() => handleTabClick(idx)}
+          >
+            {tab.props.children}
+          </div>
+        ))}
+      </div>
+      {panels.map((panel, idx) => (
+        <div
+          key={idx}
+          className={`cn-tab-panel ${activeIndex === idx ? 'cn-tab-panel-active' : ''}`}
+        >
+          {panel.props.children}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function Tab({ children }) {
+  return children;
+}
+Tab.displayName = 'Tab';
+
+export function TabPanel({ children }) {
+  return children;
+}
+TabPanel.displayName = 'TabPanel';

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

@@ -0,0 +1,19 @@
+export default function Tag({ 
+  children, 
+  onRemove,
+  className = '' 
+}) {
+  return (
+    <div className={`cn-tag ${className}`}>
+      <span>{children}</span>
+      {onRemove && (
+        <button className="cn-tag-remove" onClick={onRemove}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+
+const Textarea = forwardRef(function Textarea({ 
+  error = false,
+  className = '',
+  ...props 
+}, ref) {
+  return (
+    <textarea 
+      ref={ref}
+      className={`cn-input cn-textarea ${error ? 'cn-input-error' : ''} ${className}`}
+      {...props}
+    />
+  );
+});
+
+export default Textarea;

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

@@ -0,0 +1,78 @@
+import { useState, useEffect, useRef } from 'react';
+
+function ToastContainer() {
+  return <div className="cn-toast-container" />;
+}
+
+function ToastItem({ toast, onRemove }) {
+  useEffect(() => {
+    if (toast.duration > 0) {
+      const timer = setTimeout(() => onRemove(toast.id), toast.duration);
+      return () => clearTimeout(timer);
+    }
+  }, [toast.id, toast.duration, onRemove]);
+
+  const icons = {
+    success: '<polyline points="20 6 9 17 4 12"></polyline>',
+    error: '<circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line>',
+    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"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line>',
+    info: '<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line>'
+  };
+
+  return (
+    <div className={`cn-toast cn-toast-${toast.type}`}>
+      <div className="cn-alert-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" dangerouslySetInnerHTML={{ __html: icons[toast.type] }} />
+      </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={() => onRemove(toast.id)}>
+          <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>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default function Toast({ toasts = [], onRemove }) {
+  return (
+    <div className="cn-toast-container">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onRemove={onRemove} />
+      ))}
+    </div>
+  );
+}
+
+export function useToast() {
+  const [toasts, setToasts] = useState([]);
+  const idRef = useRef(0);
+
+  const addToast = (options) => {
+    const id = ++idRef.current;
+    const toast = { id, duration: 4000, closable: true, type: 'info', ...options };
+    setToasts((prev) => [...prev, toast]);
+    return id;
+  };
+
+  const removeToast = (id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  const toast = {
+    success: (message, title) => addToast({ message, title, type: 'success' }),
+    error: (message, title) => addToast({ message, title, type: 'error' }),
+    warning: (message, title) => addToast({ message, title, type: 'warning' }),
+    info: (message, title) => addToast({ message, title, type: 'info' }),
+    show: addToast,
+    remove: removeToast
+  };
+
+  return { toasts, toast, removeToast };
+}

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

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+export default function Toggle({ 
+  on = false, 
+  onChange, 
+  disabled = false, 
+  size = 'md',
+  className = '',
+  ...props 
+}) {
+  const [internalOn, setInternalOn] = useState(on);
+  const isOn = onChange !== undefined ? on : internalOn;
+
+  const handleToggle = () => {
+    if (disabled) return;
+    if (onChange) {
+      onChange(!on);
+    } else {
+      setInternalOn(!internalOn);
+    }
+  };
+
+  const sizeClass = size === 'sm' ? 'cn-toggle-sm' : size === 'lg' ? 'cn-toggle-lg' : '';
+
+  return (
+    <div
+      className={`cn-toggle ${isOn ? 'on' : ''} ${sizeClass} ${disabled ? 'disabled' : ''} ${className}`}
+      onClick={handleToggle}
+      {...props}
+    >
+      <div className="cn-toggle-box"></div>
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+export default function Tooltip({ 
+  children, 
+  content,
+  className = '' 
+}) {
+  return (
+    <div className={`cn-tooltip ${className}`}>
+      {children}
+      <div className="cn-tooltip-content">{content}</div>
+    </div>
+  );
+}

package/packages/react/src/index.js

@@ -0,0 +1,33 @@
+import 'CronixUI-web/dist/CronixUI.css';
+
+export { default as Toggle } from './components/Toggle';
+export { default as Button } from './components/Button';
+export { default as Input } from './components/Input';
+export { default as Textarea } from './components/Textarea';
+export { default as Checkbox } from './components/Checkbox';
+export { default as Radio, RadioGroup } from './components/Radio';
+export { default as Select } from './components/Select';
+export { default as Slider } from './components/Slider';
+export { default as FileInput } from './components/FileInput';
+export { default as Modal } from './components/Modal';
+export { default as Alert } from './components/Alert';
+export { default as Toast, useToast } from './components/Toast';
+export { default as Tabs, Tab, TabPanel } from './components/Tabs';
+export { default as Accordion, AccordionItem } from './components/Accordion';
+export { default as Dropdown, DropdownItem } from './components/Dropdown';
+export { default as Nav, NavItem } from './components/Nav';
+export { default as Badge } from './components/Badge';
+export { default as Tag } from './components/Tag';
+export { default as Card } from './components/Card';
+export { default as Avatar, AvatarGroup } from './components/Avatar';
+export { default as Progress } from './components/Progress';
+export { default as Spinner } from './components/Spinner';
+export { default as Skeleton } from './components/Skeleton';
+export { default as Tooltip } from './components/Tooltip';
+export { default as Stat } from './components/Stat';
+export { default as Pagination } from './components/Pagination';
+export { default as Table } from './components/Table';
+export { default as List, ListItem } from './components/List';
+export { default as Breadcrumb, BreadcrumbItem } from './components/Breadcrumb';
+export { default as Search } from './components/Search';
+export { default as CommandPalette } from './components/CommandPalette';

package/packages/win/CronixUI.WinUI/Controls/FlAvatar.cs

@@ -0,0 +1,39 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace CronixUI.Controls;
+
+public sealed class FlAvatar : Control
+{
+    public FlAvatar()
+    {
+        DefaultStyleKey = typeof(FlAvatar);
+    }
+
+    public static readonly DependencyProperty SourceProperty =
+        DependencyProperty.Register(nameof(Source), typeof(string), typeof(FlAvatar), new PropertyMetadata(string.Empty));
+
+    public string Source
+    {
+        get => (string)GetValue(SourceProperty);
+        set => SetValue(SourceProperty, value);
+    }
+
+    public static readonly DependencyProperty InitialsProperty =
+        DependencyProperty.Register(nameof(Initials), typeof(string), typeof(FlAvatar), new PropertyMetadata(string.Empty));
+
+    public string Initials
+    {
+        get => (string)GetValue(InitialsProperty);
+        set => SetValue(InitialsProperty, value);
+    }
+
+    public static readonly DependencyProperty SizeProperty =
+        DependencyProperty.Register(nameof(Size), typeof(string), typeof(FlAvatar), new PropertyMetadata("md"));
+
+    public string Size
+    {
+        get => (string)GetValue(SizeProperty);
+        set => SetValue(SizeProperty, value);
+    }
+}

package/packages/win/CronixUI.WinUI/Controls/FlBadge.cs

@@ -0,0 +1,21 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace CronixUI.Controls;
+
+public sealed class FlBadge : ContentControl
+{
+    public FlBadge()
+    {
+        DefaultStyleKey = typeof(FlBadge);
+    }
+
+    public static readonly DependencyProperty VariantProperty =
+        DependencyProperty.Register(nameof(Variant), typeof(string), typeof(FlBadge), new PropertyMetadata("default"));
+
+    public string Variant
+    {
+        get => (string)GetValue(VariantProperty);
+        set => SetValue(VariantProperty, value);
+    }
+}

package/packages/win/CronixUI.WinUI/Controls/FlButton.cs

@@ -0,0 +1,30 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace CronixUI.Controls;
+
+public sealed class FlButton : Button
+{
+    public FlButton()
+    {
+        DefaultStyleKey = typeof(FlButton);
+    }
+
+    public static readonly DependencyProperty VariantProperty =
+        DependencyProperty.Register(nameof(Variant), typeof(string), typeof(FlButton), new PropertyMetadata("default"));
+
+    public string Variant
+    {
+        get => (string)GetValue(VariantProperty);
+        set => SetValue(VariantProperty, value);
+    }
+
+    public static readonly DependencyProperty SizeProperty =
+        DependencyProperty.Register(nameof(Size), typeof(string), typeof(FlButton), new PropertyMetadata("md"));
+
+    public string Size
+    {
+        get => (string)GetValue(SizeProperty);
+        set => SetValue(SizeProperty, value);
+    }
+}

package/packages/win/CronixUI.WinUI/Controls/FlCard.cs

@@ -0,0 +1,21 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace CronixUI.Controls;
+
+public sealed class FlCard : ContentControl
+{
+    public FlCard()
+    {
+        DefaultStyleKey = typeof(FlCard);
+    }
+
+    public static readonly DependencyProperty HoverableProperty =
+        DependencyProperty.Register(nameof(Hoverable), typeof(bool), typeof(FlCard), new PropertyMetadata(false));
+
+    public bool Hoverable
+    {
+        get => (bool)GetValue(HoverableProperty);
+        set => SetValue(HoverableProperty, value);
+    }
+}

package/packages/win/CronixUI.WinUI/Controls/FlCheckBox.cs

@@ -0,0 +1,12 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace CronixUI.Controls;
+
+public sealed class FlCheckBox : CheckBox
+{
+    public FlCheckBox()
+    {
+        DefaultStyleKey = typeof(FlCheckBox);
+    }
+}