@thangnqdev/ui 0.1.2 → 0.2.0

package/src/data-display/Accordion.tsx

@@ -1,147 +1,147 @@
-import React, { createContext, useContext, useState, forwardRef } from 'react';
-import { ChevronDown } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-interface AccordionContextType {
-  openItems: string[];
-  toggleItem: (id: string) => void;
-}
-
-const AccordionContext = createContext<AccordionContextType | null>(null);
-
-export function useAccordion() {
-  const context = useContext(AccordionContext);
-  if (!context) throw new Error('AccordionItem components must be used within <Accordion />');
-  return context;
-}
-
-export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
-  type?: 'single' | 'multiple';
-  defaultValue?: string | string[];
-  value?: string | string[];
-  onValueChange?: (val: any) => void;
-}
-
-export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  (
-    {
-      className,
-      type = 'single',
-      defaultValue,
-      value: controlledValue,
-      onValueChange,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [internalOpen, setInternalOpen] = useState<string[]>(() => {
-      if (Array.isArray(defaultValue)) return defaultValue;
-      if (typeof defaultValue === 'string') return [defaultValue];
-      return [];
-    });
-
-    const openItems =
-      controlledValue !== undefined
-        ? Array.isArray(controlledValue)
-          ? controlledValue
-          : [controlledValue]
-        : internalOpen;
-
-    const toggleItem = (id: string) => {
-      let next: string[];
-      if (type === 'single') {
-        next = openItems.includes(id) ? [] : [id];
-      } else {
-        next = openItems.includes(id) ? openItems.filter((i) => i !== id) : [...openItems, id];
-      }
-
-      setInternalOpen(next);
-      onValueChange?.(type === 'single' ? next[0] || '' : next);
-    };
-
-    return (
-      <AccordionContext.Provider value={{ openItems, toggleItem }}>
-        <div ref={ref} className={cn('divide-y divide-[var(--ui-border-subtle)] border-y border-[var(--ui-border-subtle)]', className)} {...props}>
-          {children}
-        </div>
-      </AccordionContext.Provider>
-    );
-  }
-);
-Accordion.displayName = 'Accordion';
-
-interface AccordionItemContextType {
-  id: string;
-}
-
-const AccordionItemContext = createContext<AccordionItemContextType | null>(null);
-
-export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  value: string;
-}
-
-export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
-  ({ className, value, children, ...props }, ref) => {
-    return (
-      <AccordionItemContext.Provider value={{ id: value }}>
-        <div ref={ref} className={cn('w-full', className)} {...props}>
-          {children}
-        </div>
-      </AccordionItemContext.Provider>
-    );
-  }
-);
-AccordionItem.displayName = 'AccordionItem';
-
-export const AccordionTrigger = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
-  ({ className, children, ...props }, ref) => {
-    const { openItems, toggleItem } = useAccordion();
-    const item = useContext(AccordionItemContext);
-    const isOpen = item ? openItems.includes(item.id) : false;
-
-    return (
-      <button
-        ref={ref}
-        type="button"
-        aria-expanded={isOpen}
-        onClick={() => item && toggleItem(item.id)}
-        className={cn(
-          'flex w-full items-center justify-between py-4 text-sm font-semibold text-[var(--ui-text-primary)] transition-all hover:text-[var(--ui-primary)] text-left',
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDown
-          className={cn(
-            'h-4 w-4 shrink-0 text-[var(--ui-text-muted)] transition-transform duration-200',
-            isOpen && 'rotate-180 text-[var(--ui-primary)]'
-          )}
-        />
-      </button>
-    );
-  }
-);
-AccordionTrigger.displayName = 'AccordionTrigger';
-
-export const AccordionContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => {
-    const { openItems } = useAccordion();
-    const item = useContext(AccordionItemContext);
-    const isOpen = item ? openItems.includes(item.id) : false;
-
-    if (!isOpen) return null;
-
-    return (
-      <div
-        ref={ref}
-        className={cn('pb-4 pt-0 text-sm text-[var(--ui-text-secondary)] animate-in fade-in duration-200', className)}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-AccordionContent.displayName = 'AccordionContent';
+import React, { createContext, useContext, useState, forwardRef } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+interface AccordionContextType {
+  openItems: string[];
+  toggleItem: (id: string) => void;
+}
+
+const AccordionContext = createContext<AccordionContextType | null>(null);
+
+export function useAccordion() {
+  const context = useContext(AccordionContext);
+  if (!context) throw new Error('AccordionItem components must be used within <Accordion />');
+  return context;
+}
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  type?: 'single' | 'multiple';
+  defaultValue?: string | string[];
+  value?: string | string[];
+  onValueChange?: (val: any) => void;
+}
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  (
+    {
+      className,
+      type = 'single',
+      defaultValue,
+      value: controlledValue,
+      onValueChange,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalOpen, setInternalOpen] = useState<string[]>(() => {
+      if (Array.isArray(defaultValue)) return defaultValue;
+      if (typeof defaultValue === 'string') return [defaultValue];
+      return [];
+    });
+
+    const openItems =
+      controlledValue !== undefined
+        ? Array.isArray(controlledValue)
+          ? controlledValue
+          : [controlledValue]
+        : internalOpen;
+
+    const toggleItem = (id: string) => {
+      let next: string[];
+      if (type === 'single') {
+        next = openItems.includes(id) ? [] : [id];
+      } else {
+        next = openItems.includes(id) ? openItems.filter((i) => i !== id) : [...openItems, id];
+      }
+
+      setInternalOpen(next);
+      onValueChange?.(type === 'single' ? next[0] || '' : next);
+    };
+
+    return (
+      <AccordionContext.Provider value={{ openItems, toggleItem }}>
+        <div ref={ref} className={cn('divide-y divide-[var(--ui-border-subtle)] border-y border-[var(--ui-border-subtle)]', className)} {...props}>
+          {children}
+        </div>
+      </AccordionContext.Provider>
+    );
+  }
+);
+Accordion.displayName = 'Accordion';
+
+interface AccordionItemContextType {
+  id: string;
+}
+
+const AccordionItemContext = createContext<AccordionItemContextType | null>(null);
+
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
+  ({ className, value, children, ...props }, ref) => {
+    return (
+      <AccordionItemContext.Provider value={{ id: value }}>
+        <div ref={ref} className={cn('w-full', className)} {...props}>
+          {children}
+        </div>
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+AccordionItem.displayName = 'AccordionItem';
+
+export const AccordionTrigger = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { openItems, toggleItem } = useAccordion();
+    const item = useContext(AccordionItemContext);
+    const isOpen = item ? openItems.includes(item.id) : false;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-expanded={isOpen}
+        onClick={() => item && toggleItem(item.id)}
+        className={cn(
+          'flex w-full items-center justify-between py-4 text-sm font-semibold text-[var(--ui-text-primary)] transition-all hover:text-[var(--ui-primary)] text-left',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown
+          className={cn(
+            'h-4 w-4 shrink-0 text-[var(--ui-text-muted)] transition-transform duration-200',
+            isOpen && 'rotate-180 text-[var(--ui-primary)]'
+          )}
+        />
+      </button>
+    );
+  }
+);
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+export const AccordionContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { openItems } = useAccordion();
+    const item = useContext(AccordionItemContext);
+    const isOpen = item ? openItems.includes(item.id) : false;
+
+    if (!isOpen) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={cn('pb-4 pt-0 text-sm text-[var(--ui-text-secondary)] animate-in fade-in duration-200', className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+AccordionContent.displayName = 'AccordionContent';

package/src/data-display/Avatar.tsx

@@ -1,134 +1,134 @@
-import React, { forwardRef, useState } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const avatarVariants = cva(
-  'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--ui-bg-tertiary)] select-none border border-[var(--ui-border-subtle)]',
-  {
-    variants: {
-      size: {
-        xs: 'h-6 w-6 text-[10px]',
-        sm: 'h-8 w-8 text-xs',
-        md: 'h-10 w-10 text-sm font-semibold',
-        lg: 'h-12 w-12 text-base font-semibold',
-        xl: 'h-16 w-16 text-lg font-bold',
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-    },
-  }
-);
-
-export const statusVariants = cva(
-  'absolute bottom-0 right-0 rounded-full ring-2 ring-[var(--ui-bg-surface)]',
-  {
-    variants: {
-      status: {
-        online: 'bg-[var(--ui-success)]',
-        offline: 'bg-[var(--ui-text-muted)]',
-        busy: 'bg-[var(--ui-error)]',
-        away: 'bg-[var(--ui-warning)]',
-      },
-      size: {
-        xs: 'h-1.5 w-1.5',
-        sm: 'h-2 w-2',
-        md: 'h-2.5 w-2.5',
-        lg: 'h-3 w-3',
-        xl: 'h-4 w-4',
-      },
-    },
-    defaultVariants: {
-      status: 'online',
-      size: 'md',
-    },
-  }
-);
-
-export interface AvatarProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof avatarVariants> {
-  src?: string;
-  alt?: string;
-  name?: string;
-  status?: 'online' | 'offline' | 'busy' | 'away';
-}
-
-export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
-  ({ className, size = 'md', src, alt, name, status, children, ...props }, ref) => {
-    const [hasError, setHasError] = useState(false);
-
-    const getInitials = (n?: string) => {
-      if (!n) return '';
-      const parts = n.trim().split(' ');
-      if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
-      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-    };
-
-    const initials = name ? getInitials(name) : '';
-
-    return (
-      <div ref={ref} className={cn(avatarVariants({ size }), className)} {...props}>
-        {src && !hasError ? (
-          <img
-            src={src}
-            alt={alt || name || 'Avatar'}
-            onError={() => setHasError(true)}
-            className="h-full w-full object-cover"
-          />
-        ) : initials ? (
-          <span className="font-semibold text-[var(--ui-text-secondary)]">{initials}</span>
-        ) : (
-          children || <span className="font-semibold text-[var(--ui-text-muted)]">?</span>
-        )}
-
-        {status && (
-          <span
-            aria-label={`Status: ${status}`}
-            className={cn(statusVariants({ status, size }))}
-          />
-        )}
-      </div>
-    );
-  }
-);
-Avatar.displayName = 'Avatar';
-
-export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  max?: number;
-  spacing?: 'tight' | 'normal';
-}
-
-export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
-  ({ className, max = 4, spacing = 'tight', children, ...props }, ref) => {
-    const childArray = React.Children.toArray(children);
-    const visibleChildren = childArray.slice(0, max);
-    const remainingCount = childArray.length - max;
-
-    return (
-      <div
-        ref={ref}
-        role="group"
-        className={cn(
-          'flex items-center',
-          spacing === 'tight' ? '-space-x-3' : '-space-x-1.5',
-          className
-        )}
-        {...props}
-      >
-        {visibleChildren.map((child, i) => (
-          <div key={i} className="ring-2 ring-[var(--ui-bg-surface)] rounded-full">
-            {child}
-          </div>
-        ))}
-
-        {remainingCount > 0 && (
-          <div className="relative inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-default)] ring-2 ring-[var(--ui-bg-surface)] text-xs font-bold text-[var(--ui-text-secondary)] select-none">
-            +{remainingCount}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-AvatarGroup.displayName = 'AvatarGroup';
+import React, { forwardRef, useState } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const avatarVariants = cva(
+  'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--ui-bg-tertiary)] select-none border border-[var(--ui-border-subtle)]',
+  {
+    variants: {
+      size: {
+        xs: 'h-6 w-6 text-[10px]',
+        sm: 'h-8 w-8 text-xs',
+        md: 'h-10 w-10 text-sm font-semibold',
+        lg: 'h-12 w-12 text-base font-semibold',
+        xl: 'h-16 w-16 text-lg font-bold',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export const statusVariants = cva(
+  'absolute bottom-0 right-0 rounded-full ring-2 ring-[var(--ui-bg-surface)]',
+  {
+    variants: {
+      status: {
+        online: 'bg-[var(--ui-success)]',
+        offline: 'bg-[var(--ui-text-muted)]',
+        busy: 'bg-[var(--ui-error)]',
+        away: 'bg-[var(--ui-warning)]',
+      },
+      size: {
+        xs: 'h-1.5 w-1.5',
+        sm: 'h-2 w-2',
+        md: 'h-2.5 w-2.5',
+        lg: 'h-3 w-3',
+        xl: 'h-4 w-4',
+      },
+    },
+    defaultVariants: {
+      status: 'online',
+      size: 'md',
+    },
+  }
+);
+
+export interface AvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof avatarVariants> {
+  src?: string;
+  alt?: string;
+  name?: string;
+  status?: 'online' | 'offline' | 'busy' | 'away';
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, size = 'md', src, alt, name, status, children, ...props }, ref) => {
+    const [hasError, setHasError] = useState(false);
+
+    const getInitials = (n?: string) => {
+      if (!n) return '';
+      const parts = n.trim().split(' ');
+      if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    };
+
+    const initials = name ? getInitials(name) : '';
+
+    return (
+      <div ref={ref} className={cn(avatarVariants({ size }), className)} {...props}>
+        {src && !hasError ? (
+          <img
+            src={src}
+            alt={alt || name || 'Avatar'}
+            onError={() => setHasError(true)}
+            className="h-full w-full object-cover"
+          />
+        ) : initials ? (
+          <span className="font-semibold text-[var(--ui-text-secondary)]">{initials}</span>
+        ) : (
+          children || <span className="font-semibold text-[var(--ui-text-muted)]">?</span>
+        )}
+
+        {status && (
+          <span
+            aria-label={`Status: ${status}`}
+            className={cn(statusVariants({ status, size }))}
+          />
+        )}
+      </div>
+    );
+  }
+);
+Avatar.displayName = 'Avatar';
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  max?: number;
+  spacing?: 'tight' | 'normal';
+}
+
+export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
+  ({ className, max = 4, spacing = 'tight', children, ...props }, ref) => {
+    const childArray = React.Children.toArray(children);
+    const visibleChildren = childArray.slice(0, max);
+    const remainingCount = childArray.length - max;
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        className={cn(
+          'flex items-center',
+          spacing === 'tight' ? '-space-x-3' : '-space-x-1.5',
+          className
+        )}
+        {...props}
+      >
+        {visibleChildren.map((child, i) => (
+          <div key={i} className="ring-2 ring-[var(--ui-bg-surface)] rounded-full">
+            {child}
+          </div>
+        ))}
+
+        {remainingCount > 0 && (
+          <div className="relative inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-default)] ring-2 ring-[var(--ui-bg-surface)] text-xs font-bold text-[var(--ui-text-secondary)] select-none">
+            +{remainingCount}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+AvatarGroup.displayName = 'AvatarGroup';