@thangnqdev/ui 0.2.0 → 0.2.2

package/src/feedback/Alert.tsx

@@ -1,80 +1,80 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { CheckCircle2, AlertTriangle, AlertCircle, Info, X } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export const alertVariants = cva(
-  'relative w-full rounded-[var(--ui-radius-lg)] border p-4 text-sm flex items-start gap-3.5 shadow-sm',
-  {
-    variants: {
-      status: {
-        info: 'bg-[var(--ui-info-subtle)] border-[var(--ui-info)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-info)]',
-        success: 'bg-[var(--ui-success-subtle)] border-[var(--ui-success)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-success)]',
-        warning: 'bg-[var(--ui-warning-subtle)] border-[var(--ui-warning)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-warning)]',
-        error: 'bg-[var(--ui-error-subtle)] border-[var(--ui-error)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-error)]',
-      },
-    },
-    defaultVariants: {
-      status: 'info',
-    },
-  }
-);
-
-const statusIcons = {
-  info: <Info className="w-5 h-5 flex-shrink-0" />,
-  success: <CheckCircle2 className="w-5 h-5 flex-shrink-0" />,
-  warning: <AlertTriangle className="w-5 h-5 flex-shrink-0" />,
-  error: <AlertCircle className="w-5 h-5 flex-shrink-0" />,
-};
-
-export interface AlertProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof alertVariants> {
-  icon?: React.ReactNode;
-  onClose?: () => void;
-}
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, status = 'info', icon, onClose, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        role="alert"
-        className={cn(alertVariants({ status }), className)}
-        {...props}
-      >
-        {icon !== undefined ? icon : statusIcons[status || 'info']}
-        <div className="flex-1 space-y-1">{children}</div>
-        {onClose && (
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Dismiss alert"
-            className="p-1 rounded text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-black/5 dark:hover:bg-white/5 transition-colors -mr-1 -mt-1"
-          >
-            <X className="w-4 h-4" />
-          </button>
-        )}
-      </div>
-    );
-  }
-);
-Alert.displayName = 'Alert';
-
-export const AlertTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, children, ...props }, ref) => (
-    <h5 ref={ref} className={cn('font-semibold leading-none tracking-tight text-[var(--ui-text-primary)]', className)} {...props}>
-      {children}
-    </h5>
-  )
-);
-AlertTitle.displayName = 'AlertTitle';
-
-export const AlertDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, children, ...props }, ref) => (
-    <p ref={ref} className={cn('text-xs text-[var(--ui-text-secondary)] leading-relaxed', className)} {...props}>
-      {children}
-    </p>
-  )
-);
-AlertDescription.displayName = 'AlertDescription';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { CheckCircle2, AlertTriangle, AlertCircle, Info, X } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const alertVariants = cva(
+  'relative w-full rounded-[var(--ui-radius-lg)] border p-4 text-sm flex items-start gap-3.5 shadow-sm',
+  {
+    variants: {
+      status: {
+        info: 'bg-[var(--ui-info-subtle)] border-[var(--ui-info)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-info)]',
+        success: 'bg-[var(--ui-success-subtle)] border-[var(--ui-success)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-success)]',
+        warning: 'bg-[var(--ui-warning-subtle)] border-[var(--ui-warning)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-warning)]',
+        error: 'bg-[var(--ui-error-subtle)] border-[var(--ui-error)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-error)]',
+      },
+    },
+    defaultVariants: {
+      status: 'info',
+    },
+  }
+);
+
+const statusIcons = {
+  info: <Info className="w-5 h-5 flex-shrink-0" />,
+  success: <CheckCircle2 className="w-5 h-5 flex-shrink-0" />,
+  warning: <AlertTriangle className="w-5 h-5 flex-shrink-0" />,
+  error: <AlertCircle className="w-5 h-5 flex-shrink-0" />,
+};
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  icon?: React.ReactNode;
+  onClose?: () => void;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, status = 'info', icon, onClose, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ status }), className)}
+        {...props}
+      >
+        {icon !== undefined ? icon : statusIcons[status || 'info']}
+        <div className="flex-1 space-y-1">{children}</div>
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Dismiss alert"
+            className="p-1 rounded text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-black/5 dark:hover:bg-white/5 transition-colors -mr-1 -mt-1"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+Alert.displayName = 'Alert';
+
+export const AlertTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, children, ...props }, ref) => (
+    <h5 ref={ref} className={cn('font-semibold leading-none tracking-tight text-[var(--ui-text-primary)]', className)} {...props}>
+      {children}
+    </h5>
+  )
+);
+AlertTitle.displayName = 'AlertTitle';
+
+export const AlertDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => (
+    <p ref={ref} className={cn('text-xs text-[var(--ui-text-secondary)] leading-relaxed', className)} {...props}>
+      {children}
+    </p>
+  )
+);
+AlertDescription.displayName = 'AlertDescription';

package/src/feedback/EmptyState.tsx

@@ -1,45 +1,45 @@
-import React, { forwardRef } from 'react';
-import { Inbox } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-  icon?: React.ReactNode;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  action?: React.ReactNode;
-}
-
-export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
-  ({ className, icon, title, description, action, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex flex-col items-center justify-center p-8 sm:p-12 text-center rounded-[var(--ui-radius-xl)] border border-dashed border-[var(--ui-border-default)] bg-[var(--ui-bg-secondary)]/50',
-          className
-        )}
-        {...props}
-      >
-        <div className="flex items-center justify-center w-14 h-14 rounded-full bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] mb-4">
-          {icon || <Inbox className="w-7 h-7 stroke-[1.5]" />}
-        </div>
-
-        <h3 className="text-base sm:text-lg font-bold text-[var(--ui-text-primary)] mb-1">
-          {title}
-        </h3>
-
-        {description && (
-          <p className="text-xs sm:text-sm text-[var(--ui-text-muted)] max-w-sm mb-6 leading-relaxed">
-            {description}
-          </p>
-        )}
-
-        {action && <div className="inline-flex items-center gap-3">{action}</div>}
-
-        {children}
-      </div>
-    );
-  }
-);
-
-EmptyState.displayName = 'EmptyState';
+import React, { forwardRef } from 'react';
+import { Inbox } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ className, icon, title, description, action, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-col items-center justify-center p-8 sm:p-12 text-center rounded-[var(--ui-radius-xl)] border border-dashed border-[var(--ui-border-default)] bg-[var(--ui-bg-secondary)]/50',
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-center justify-center w-14 h-14 rounded-full bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] mb-4">
+          {icon || <Inbox className="w-7 h-7 stroke-[1.5]" />}
+        </div>
+
+        <h3 className="text-base sm:text-lg font-bold text-[var(--ui-text-primary)] mb-1">
+          {title}
+        </h3>
+
+        {description && (
+          <p className="text-xs sm:text-sm text-[var(--ui-text-muted)] max-w-sm mb-6 leading-relaxed">
+            {description}
+          </p>
+        )}
+
+        {action && <div className="inline-flex items-center gap-3">{action}</div>}
+
+        {children}
+      </div>
+    );
+  }
+);
+
+EmptyState.displayName = 'EmptyState';

package/src/feedback/Skeleton.tsx

@@ -1,66 +1,66 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../utils/cn';
-
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  circle?: boolean;
-}
-
-export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
-  ({ className, circle = false, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        aria-hidden="true"
-        className={cn(
-          'animate-pulse bg-[var(--ui-bg-tertiary)]',
-          circle ? 'rounded-full' : 'rounded-[var(--ui-radius-md)]',
-          className
-        )}
-        {...props}
-      />
-    );
-  }
-);
-Skeleton.displayName = 'Skeleton';
-
-export interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
-  lines?: number;
-  gap?: 'sm' | 'md' | 'lg';
-}
-
-export const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(
-  ({ className, lines = 3, gap = 'md', ...props }, ref) => {
-    const gapClass = gap === 'sm' ? 'space-y-1.5' : gap === 'lg' ? 'space-y-3' : 'space-y-2';
-
-    return (
-      <div ref={ref} aria-hidden="true" className={cn('w-full', gapClass, className)} {...props}>
-        {Array.from({ length: lines }).map((_, i) => (
-          <Skeleton
-            key={i}
-            className={cn('h-4 w-full', i === lines - 1 && 'w-4/5')}
-          />
-        ))}
-      </div>
-    );
-  }
-);
-SkeletonText.displayName = 'SkeletonText';
-
-export interface SkeletonCircleProps extends React.HTMLAttributes<HTMLDivElement> {
-  size?: number | string;
-}
-
-export const SkeletonCircle = forwardRef<HTMLDivElement, SkeletonCircleProps>(
-  ({ className, size = '2.5rem', style, ...props }, ref) => {
-    return (
-      <Skeleton
-        ref={ref}
-        circle
-        style={{ width: size, height: size, ...style }}
-        className={className}
-        {...props}
-      />
-    );
-  }
-);
-SkeletonCircle.displayName = 'SkeletonCircle';
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  circle?: boolean;
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, circle = false, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        className={cn(
+          'animate-pulse bg-[var(--ui-bg-tertiary)]',
+          circle ? 'rounded-full' : 'rounded-[var(--ui-radius-md)]',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Skeleton.displayName = 'Skeleton';
+
+export interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
+  lines?: number;
+  gap?: 'sm' | 'md' | 'lg';
+}
+
+export const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(
+  ({ className, lines = 3, gap = 'md', ...props }, ref) => {
+    const gapClass = gap === 'sm' ? 'space-y-1.5' : gap === 'lg' ? 'space-y-3' : 'space-y-2';
+
+    return (
+      <div ref={ref} aria-hidden="true" className={cn('w-full', gapClass, className)} {...props}>
+        {Array.from({ length: lines }).map((_, i) => (
+          <Skeleton
+            key={i}
+            className={cn('h-4 w-full', i === lines - 1 && 'w-4/5')}
+          />
+        ))}
+      </div>
+    );
+  }
+);
+SkeletonText.displayName = 'SkeletonText';
+
+export interface SkeletonCircleProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: number | string;
+}
+
+export const SkeletonCircle = forwardRef<HTMLDivElement, SkeletonCircleProps>(
+  ({ className, size = '2.5rem', style, ...props }, ref) => {
+    return (
+      <Skeleton
+        ref={ref}
+        circle
+        style={{ width: size, height: size, ...style }}
+        className={className}
+        {...props}
+      />
+    );
+  }
+);
+SkeletonCircle.displayName = 'SkeletonCircle';

package/src/feedback/Spinner.tsx

@@ -1,65 +1,65 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const spinnerVariants = cva('animate-spin inline-block', {
-  variants: {
-    size: {
-      xs: 'w-3 h-3',
-      sm: 'w-4 h-4',
-      md: 'w-6 h-6',
-      lg: 'w-8 h-8',
-      xl: 'w-12 h-12',
-    },
-    variant: {
-      primary: 'text-[var(--ui-primary)]',
-      secondary: 'text-[var(--ui-secondary)]',
-      current: 'text-current',
-      muted: 'text-[var(--ui-text-muted)]',
-      white: 'text-white',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    variant: 'primary',
-  },
-});
-
-export interface SpinnerProps
-  extends React.SVGAttributes<SVGSVGElement>,
-    VariantProps<typeof spinnerVariants> {
-  label?: string;
-}
-
-export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
-  ({ className, size, variant, label = 'Loading...', ...props }, ref) => {
-    return (
-      <svg
-        ref={ref}
-        role="status"
-        aria-label={label}
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className={cn(spinnerVariants({ size, variant }), className)}
-        {...props}
-      >
-        <circle
-          className="opacity-25"
-          cx="12"
-          cy="12"
-          r="10"
-          stroke="currentColor"
-          strokeWidth="4"
-        />
-        <path
-          className="opacity-75"
-          fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        />
-      </svg>
-    );
-  }
-);
-
-Spinner.displayName = 'Spinner';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const spinnerVariants = cva('animate-spin inline-block', {
+  variants: {
+    size: {
+      xs: 'w-3 h-3',
+      sm: 'w-4 h-4',
+      md: 'w-6 h-6',
+      lg: 'w-8 h-8',
+      xl: 'w-12 h-12',
+    },
+    variant: {
+      primary: 'text-[var(--ui-primary)]',
+      secondary: 'text-[var(--ui-secondary)]',
+      current: 'text-current',
+      muted: 'text-[var(--ui-text-muted)]',
+      white: 'text-white',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'primary',
+  },
+});
+
+export interface SpinnerProps
+  extends React.SVGAttributes<SVGSVGElement>,
+    VariantProps<typeof spinnerVariants> {
+  label?: string;
+}
+
+export const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
+  ({ className, size, variant, label = 'Loading...', ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        role="status"
+        aria-label={label}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={cn(spinnerVariants({ size, variant }), className)}
+        {...props}
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    );
+  }
+);
+
+Spinner.displayName = 'Spinner';

package/src/feedback/index.ts

@@ -1,5 +1,5 @@
-export * from './Spinner';
-export * from './Skeleton';
-export * from './ProgressBar';
-export * from './Alert';
-export * from './EmptyState';
+export * from './Spinner';
+export * from './Skeleton';
+export * from './ProgressBar';
+export * from './Alert';
+export * from './EmptyState';

package/src/feedback/tokens.css

@@ -1,4 +1,4 @@
-/* Feedback Tokens */
-:root {
-  --ui-spinner-speed: 750ms;
-}
+/* Feedback Tokens */
+:root {
+  --ui-spinner-speed: 750ms;
+}