cronixui 1.1.2 → 1.1.3

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

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

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

package/packages/react/src/index.ts

@@ -1,40 +1,40 @@
-export { default as tokens, type Tokens } from './tokens';
-
-export { default as Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './components/Button';
-export { default as Card, type CardProps, type CardHeaderProps, type CardBodyProps, type CardFooterProps } from './components/Card';
-export { default as Badge, type BadgeProps, type BadgeVariant } from './components/Badge';
-export { default as Input, type InputProps, type InputSize } from './components/Input';
-export { default as Textarea, type TextareaProps } from './components/Textarea';
-export { default as Checkbox, type CheckboxProps } from './components/Checkbox';
-export { default as Radio, RadioGroup, type RadioProps, type RadioGroupProps } from './components/Radio';
-export { default as Select, type SelectProps, type SelectOption } from './components/Select';
-export { default as Slider, type SliderProps } from './components/Slider';
-export { default as Toggle, type ToggleProps, type ToggleSize } from './components/Toggle';
-export { default as FileInput, type FileInputProps } from './components/FileInput';
-export { default as Avatar, AvatarGroup, type AvatarProps, type AvatarGroupProps, type AvatarSize } from './components/Avatar';
-export { default as Alert, type AlertProps, type AlertVariant } from './components/Alert';
-export { default as Spinner, type SpinnerProps, type SpinnerSize } from './components/Spinner';
-export { default as Skeleton, type SkeletonProps, type SkeletonVariant } from './components/Skeleton';
-export { default as Progress, type ProgressProps, type ProgressVariant, type ProgressSize } from './components/Progress';
-export { default as Table, type TableProps, type TableColumn } from './components/Table';
-export { default as List, ListItem, type ListProps, type ListItemProps } from './components/List';
-export { default as Tooltip, type TooltipProps, type TooltipPosition } from './components/Tooltip';
-export { default as Stat, type StatProps, type StatDeltaType } from './components/Stat';
-export { default as Modal, type ModalProps, type ModalSize, type ModalHeaderProps, type ModalBodyProps, type ModalFooterProps } from './components/Modal';
-export { default as Dropdown, type DropdownProps, type DropdownItemProps } from './components/Dropdown';
-export { default as Tabs, type TabsProps, type TabProps, type TabPanelProps } from './components/Tabs';
-export { default as Accordion, type AccordionProps, type AccordionItemProps } from './components/Accordion';
-export { default as Toast, useToast, type ToastProps, type ToastOptions, type ToastType, type UseToastReturn } from './components/Toast';
-export { default as Pagination, type PaginationProps } from './components/Pagination';
-export { default as Search, type SearchProps, type SearchItem } from './components/Search';
-export { default as CommandPalette, type CommandPaletteProps, type CommandPaletteItem } from './components/CommandPalette';
-export { default as Nav, type NavProps, type NavItemProps } from './components/Nav';
-export { default as Breadcrumb, type BreadcrumbProps, type BreadcrumbItemProps } from './components/Breadcrumb';
-export { default as Container, type ContainerProps, type ContainerSize } from './components/Container';
-export { default as Header, type HeaderProps } from './components/Header';
-export { default as Sidebar, type SidebarProps, type SidebarItemProps } from './components/Sidebar';
-export { default as Footer, type FooterProps } from './components/Footer';
-export { default as Tag, type TagProps } from './components/Tag';
-export { default as FormGroup, type FormGroupProps } from './components/FormGroup';
-export { default as Stack, HStack, Divider, type StackProps, type DividerProps } from './components/Stack';
-export { H1, H2, H3, H4, H5, H6, Text, Label, type TextProps, type LabelProps } from './components/Typography';
+export { default as tokens, type Tokens } from './tokens';
+
+export { default as Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './components/Button';
+export { default as Card, type CardProps, type CardHeaderProps, type CardBodyProps, type CardFooterProps } from './components/Card';
+export { default as Badge, type BadgeProps, type BadgeVariant } from './components/Badge';
+export { default as Input, type InputProps, type InputSize } from './components/Input';
+export { default as Textarea, type TextareaProps } from './components/Textarea';
+export { default as Checkbox, type CheckboxProps } from './components/Checkbox';
+export { default as Radio, RadioGroup, type RadioProps, type RadioGroupProps } from './components/Radio';
+export { default as Select, type SelectProps, type SelectOption } from './components/Select';
+export { default as Slider, type SliderProps } from './components/Slider';
+export { default as Toggle, type ToggleProps, type ToggleSize } from './components/Toggle';
+export { default as FileInput, type FileInputProps } from './components/FileInput';
+export { default as Avatar, AvatarGroup, type AvatarProps, type AvatarGroupProps, type AvatarSize } from './components/Avatar';
+export { default as Alert, type AlertProps, type AlertVariant } from './components/Alert';
+export { default as Spinner, type SpinnerProps, type SpinnerSize } from './components/Spinner';
+export { default as Skeleton, type SkeletonProps, type SkeletonVariant } from './components/Skeleton';
+export { default as Progress, type ProgressProps, type ProgressVariant, type ProgressSize } from './components/Progress';
+export { default as Table, type TableProps, type TableColumn } from './components/Table';
+export { default as List, ListItem, type ListProps, type ListItemProps } from './components/List';
+export { default as Tooltip, type TooltipProps, type TooltipPosition } from './components/Tooltip';
+export { default as Stat, type StatProps, type StatDeltaType } from './components/Stat';
+export { default as Modal, type ModalProps, type ModalSize, type ModalHeaderProps, type ModalBodyProps, type ModalFooterProps } from './components/Modal';
+export { default as Dropdown, type DropdownProps, type DropdownItemProps } from './components/Dropdown';
+export { default as Tabs, type TabsProps, type TabProps, type TabPanelProps } from './components/Tabs';
+export { default as Accordion, type AccordionProps, type AccordionItemProps } from './components/Accordion';
+export { default as Toast, useToast, type ToastProps, type ToastOptions, type ToastType, type UseToastReturn } from './components/Toast';
+export { default as Pagination, type PaginationProps } from './components/Pagination';
+export { default as Search, type SearchProps, type SearchItem } from './components/Search';
+export { default as CommandPalette, type CommandPaletteProps, type CommandPaletteItem } from './components/CommandPalette';
+export { default as Nav, type NavProps, type NavItemProps } from './components/Nav';
+export { default as Breadcrumb, type BreadcrumbProps, type BreadcrumbItemProps } from './components/Breadcrumb';
+export { default as Container, type ContainerProps, type ContainerSize } from './components/Container';
+export { default as Header, type HeaderProps } from './components/Header';
+export { default as Sidebar, type SidebarProps, type SidebarItemProps } from './components/Sidebar';
+export { default as Footer, type FooterProps } from './components/Footer';
+export { default as Tag, type TagProps } from './components/Tag';
+export { default as FormGroup, type FormGroupProps } from './components/FormGroup';
+export { default as Stack, HStack, Divider, type StackProps, type DividerProps } from './components/Stack';
+export { H1, H2, H3, H4, H5, H6, Text, Label, type TextProps, type LabelProps } from './components/Typography';