@thangnqdev/ui 0.1.0

package/src/bento/BentoCard.tsx

@@ -0,0 +1,140 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const bentoCardVariants = cva(
+  'group relative flex flex-col justify-between overflow-hidden transition-all duration-500 ease-out border text-[var(--ui-bento-text-title)]',
+  {
+    variants: {
+      colSpan: {
+        1: 'col-span-1',
+        2: 'col-span-1 md:col-span-2',
+        3: 'col-span-1 md:col-span-2 lg:col-span-3',
+      },
+      rowSpan: {
+        1: 'row-span-1',
+        2: 'row-span-1 md:row-span-2 md:min-h-[460px]',
+        3: 'row-span-1 md:row-span-3 md:min-h-[680px]',
+      },
+      variant: {
+        default:
+          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] hover:bg-[var(--ui-bento-bg-card-hover)] shadow-[var(--ui-bento-shadow)]',
+        spotlight:
+          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-white/30 dark:hover:border-white/30 hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.12)]',
+        elevated:
+          'bg-[image:var(--ui-bento-bg-elevated)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] shadow-[var(--ui-bento-shadow-elevated)]',
+      },
+      radius: {
+        md: 'rounded-[var(--ui-bento-radius-md)]',
+        lg: 'rounded-[var(--ui-bento-radius-lg)]',
+      },
+      padding: {
+        sm: 'p-4 sm:p-5',
+        md: 'p-5 sm:p-7',
+        lg: 'p-6 sm:p-9',
+      },
+    },
+    defaultVariants: {
+      colSpan: 1,
+      rowSpan: 1,
+      variant: 'default',
+      radius: 'lg',
+      padding: 'md',
+    },
+  }
+);
+
+export interface BentoCardProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+    VariantProps<typeof bentoCardVariants> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  tag?: React.ReactNode;
+  /**
+   * Decorative background graphic. Non-interactive backdrop element.
+   */
+  backgroundGraphic?: React.ReactNode;
+  /**
+   * @deprecated Use `backgroundGraphic` instead.
+   */
+  graphic?: React.ReactNode;
+}
+
+export const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>(
+  (
+    {
+      className,
+      colSpan,
+      rowSpan,
+      variant,
+      radius,
+      padding,
+      title,
+      description,
+      icon,
+      tag,
+      backgroundGraphic,
+      graphic,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const bgGraphic = backgroundGraphic ?? graphic;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(bentoCardVariants({ colSpan, rowSpan, variant, radius, padding, className }))}
+        {...props}
+      >
+        {/* Subtle Specular Top Line */}
+        <div
+          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-50"
+          aria-hidden="true"
+        />
+
+        {/* Background Visual Graphic Slot (Decorative) */}
+        {bgGraphic && (
+          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none opacity-70 transition-transform duration-700 ease-out motion-safe:group-hover:scale-105">
+            {bgGraphic}
+          </div>
+        )}
+
+        {/* Top Header Section */}
+        {(icon || tag) && (
+          <div className="relative z-10 flex items-start justify-between gap-4">
+            {icon && (
+              <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--ui-bento-icon-bg)] border border-[var(--ui-bento-icon-border)] backdrop-blur-md shadow-inner transition-transform duration-300 group-hover:scale-105">
+                {icon}
+              </div>
+            )}
+            {tag && (
+              <div className="font-mono text-[10px] font-semibold uppercase tracking-widest text-[var(--ui-bento-text-tag)] border border-[var(--ui-bento-icon-border)] bg-[var(--ui-bento-icon-bg)] px-2.5 py-1 rounded-md backdrop-blur-sm">
+                {tag}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Main Content Area */}
+        <div className="relative z-10 mt-auto pt-6">
+          {title && (
+            <h3 className="text-xl font-bold tracking-tight text-[var(--ui-bento-text-title)] transition-colors group-hover:text-[var(--ui-primary)] dark:group-hover:text-white">
+              {title}
+            </h3>
+          )}
+          {description && (
+            <p className="mt-2 text-sm leading-relaxed text-[var(--ui-bento-text-desc)] font-normal">
+              {description}
+            </p>
+          )}
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+BentoCard.displayName = 'BentoCard';

package/src/bento/BentoGrid.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const bentoGridVariants = cva('grid w-full auto-rows-[minmax(240px,auto)]', {
+  variants: {
+    cols: {
+      1: 'grid-cols-1',
+      2: 'grid-cols-1 md:grid-cols-2',
+      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+    },
+    gap: {
+      sm: 'gap-4',
+      md: 'gap-6',
+      lg: 'gap-8',
+    },
+    flow: {
+      row: 'grid-flow-row',
+      col: 'grid-flow-col',
+      dense: 'grid-flow-dense',
+      'row-dense': 'grid-flow-row-dense',
+      'col-dense': 'grid-flow-col-dense',
+    },
+  },
+  defaultVariants: {
+    cols: 3,
+    gap: 'md',
+    flow: 'row',
+  },
+});
+
+export interface BentoGridProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof bentoGridVariants> {}
+
+export const BentoGrid: React.FC<BentoGridProps> = ({
+  className,
+  cols,
+  gap,
+  flow,
+  children,
+  ...props
+}) => {
+  return (
+    <div className={cn(bentoGridVariants({ cols, gap, flow, className }))} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/bento/index.ts

@@ -0,0 +1,2 @@
+export * from './BentoGrid';
+export * from './BentoCard';

package/src/bento/tokens.css

@@ -0,0 +1,46 @@
+:root {
+  /* ==========================================================================
+     AETHER BENTO TOKENS — LIGHT MODE (ARCHITECTURAL ALABASTER)
+     ========================================================================== */
+  --ui-bento-bg-surface: #f6f8fb;
+  --ui-bento-bg-card: #ffffff;
+  --ui-bento-bg-card-hover: #f9fafc;
+  --ui-bento-bg-elevated: linear-gradient(180deg, #ffffff 0%, #f1f4f9 100%);
+
+  --ui-bento-border: rgba(15, 23, 42, 0.08);
+  --ui-bento-border-hover: rgba(15, 23, 42, 0.20);
+
+  --ui-bento-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 1);
+  --ui-bento-shadow-elevated: 0 16px 40px -6px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 1);
+
+  --ui-bento-text-title: #0a0c10;
+  --ui-bento-text-desc: #4b5563;
+  --ui-bento-text-tag: #6b7280;
+  --ui-bento-icon-bg: rgba(15, 23, 42, 0.04);
+  --ui-bento-icon-border: rgba(15, 23, 42, 0.08);
+
+  --ui-bento-radius-md: 1.25rem; /* 20px */
+  --ui-bento-radius-lg: 1.75rem; /* 28px */
+}
+
+.dark {
+  /* ==========================================================================
+     AETHER BENTO TOKENS — DARK MODE (OBSIDIAN & SMOKED QUARTZ)
+     ========================================================================== */
+  --ui-bento-bg-surface: #07080b;
+  --ui-bento-bg-card: #0d1017;
+  --ui-bento-bg-card-hover: #121620;
+  --ui-bento-bg-elevated: linear-gradient(180deg, #131722 0%, #0a0c11 100%);
+
+  --ui-bento-border: rgba(255, 255, 255, 0.07);
+  --ui-bento-border-hover: rgba(255, 255, 255, 0.20);
+
+  --ui-bento-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
+  --ui-bento-shadow-elevated: 0 24px 60px -8px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
+
+  --ui-bento-text-title: #f2f5f9;
+  --ui-bento-text-desc: #94a1b2;
+  --ui-bento-text-tag: #6b7a90;
+  --ui-bento-icon-bg: rgba(255, 255, 255, 0.05);
+  --ui-bento-icon-border: rgba(255, 255, 255, 0.10);
+}

package/src/buttons/Button.tsx

@@ -0,0 +1,104 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const buttonVariants = cva(
+  'relative inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--ui-primary)]/30 active:scale-[0.97] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        primary:
+          'bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] text-white shadow-sm hover:shadow-[0_4px_16px_rgba(0,113,227,0.35)] border border-white/20',
+        secondary:
+          'bg-[var(--ui-bg-tertiary)] hover:bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] border border-[var(--ui-border-subtle)] shadow-sm',
+        outline:
+          'border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]/60 backdrop-blur-xl text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] hover:border-[var(--ui-border-strong)] shadow-sm',
+        ghost:
+          'bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]/70',
+        danger:
+          'bg-[var(--ui-error)] hover:bg-[var(--ui-error)]/90 text-white shadow-sm hover:shadow-[0_4px_16px_rgba(255,59,48,0.35)] border border-white/15',
+        link:
+          'bg-transparent text-[var(--ui-primary)] underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal',
+        glass:
+          'bg-white/10 dark:bg-white/10 backdrop-blur-2xl border border-white/20 dark:border-white/15 text-[var(--ui-text-primary)] hover:bg-white/20 dark:hover:bg-white/15 shadow-[0_8px_32px_rgba(0,0,0,0.12)] hover:shadow-[0_8px_32px_rgba(0,113,227,0.25)]',
+      },
+      size: {
+        xs: 'h-7 px-2.5 text-xs rounded-[var(--ui-radius-sm)] gap-1',
+        sm: 'h-8.5 px-3.5 text-xs rounded-[var(--ui-radius-md)] gap-1.5',
+        md: 'h-10 px-4.5 text-sm rounded-[var(--ui-radius-md)] gap-2 font-semibold',
+        lg: 'h-12 px-6 text-base rounded-[var(--ui-radius-lg)] gap-2.5 font-semibold',
+        xl: 'h-14 px-8 text-lg rounded-[var(--ui-radius-xl)] gap-3 font-bold',
+      },
+      fullWidth: {
+        true: 'w-full',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+      fullWidth: false,
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  loading?: boolean;
+  loadingText?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      fullWidth,
+      loading = false,
+      loadingText,
+      leftIcon,
+      rightIcon,
+      disabled,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isDisabled = disabled || loading;
+
+    return (
+      <button
+        ref={ref}
+        disabled={isDisabled}
+        className={cn(buttonVariants({ variant, size, fullWidth }), className)}
+        {...props}
+      >
+        {/* Apple subtle top specular highlight */}
+        <span
+          aria-hidden="true"
+          className="absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/35 to-transparent pointer-events-none"
+        />
+
+        {loading ? (
+          <>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            <span>{loadingText || children}</span>
+          </>
+        ) : (
+          <>
+            {leftIcon && <span className="flex-shrink-0 inline-flex items-center">{leftIcon}</span>}
+            <span>{children}</span>
+            {rightIcon && <span className="flex-shrink-0 inline-flex items-center">{rightIcon}</span>}
+          </>
+        )}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/buttons/ButtonGroup.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const buttonGroupVariants = cva('inline-flex', {
+  variants: {
+    orientation: {
+      horizontal:
+        'flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:last-child)]:border-r-0',
+      vertical:
+        'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:last-child)]:border-b-0',
+    },
+    attached: {
+      true: '',
+      false: 'gap-2',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    attached: true,
+  },
+});
+
+export interface ButtonGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof buttonGroupVariants> {}
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ className, orientation, attached, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="group"
+        className={cn(buttonGroupVariants({ orientation, attached }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+ButtonGroup.displayName = 'ButtonGroup';

package/src/buttons/IconButton.tsx

@@ -0,0 +1,79 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const iconButtonVariants = cva(
+  'inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2 active:scale-95',
+  {
+    variants: {
+      variant: {
+        primary:
+          'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)] hover:bg-[var(--ui-primary-hover)] shadow-sm',
+        secondary:
+          'bg-[var(--ui-secondary)] text-[var(--ui-secondary-fg)] hover:bg-[var(--ui-secondary-hover)] shadow-sm',
+        outline:
+          'border border-[var(--ui-border-default)] bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]',
+        ghost:
+          'bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]',
+        danger:
+          'bg-[var(--ui-error)] text-[var(--ui-error-fg)] hover:bg-[var(--ui-error)]/90 shadow-sm',
+      },
+      size: {
+        xs: 'w-7 h-7 text-xs rounded-[var(--ui-radius-sm)]',
+        sm: 'w-8 h-8 text-sm rounded-[var(--ui-radius-md)]',
+        md: 'w-10 h-10 text-base rounded-[var(--ui-radius-md)]',
+        lg: 'w-12 h-12 text-lg rounded-[var(--ui-radius-lg)]',
+      },
+      shape: {
+        rounded: '',
+        circle: 'rounded-full',
+      },
+    },
+    defaultVariants: {
+      variant: 'ghost',
+      size: 'md',
+      shape: 'rounded',
+    },
+  }
+);
+
+export interface IconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof iconButtonVariants> {
+  'aria-label': string;
+  icon?: React.ReactNode;
+  loading?: boolean;
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      shape,
+      icon,
+      loading = false,
+      disabled,
+      'aria-label': ariaLabel,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        aria-label={ariaLabel}
+        disabled={disabled || loading}
+        className={cn(iconButtonVariants({ variant, size, shape }), className)}
+        {...props}
+      >
+        {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : icon || children}
+      </button>
+    );
+  }
+);
+
+IconButton.displayName = 'IconButton';

package/src/buttons/SplitButton.tsx

@@ -0,0 +1,86 @@
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { Button, ButtonProps } from './Button';
+import { cn } from '../utils/cn';
+
+export interface SplitButtonItem {
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export interface SplitButtonProps extends Omit<ButtonProps, 'onClick'> {
+  items: SplitButtonItem[];
+  onMainClick?: () => void;
+}
+
+export const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
+  ({ className, items, onMainClick, variant = 'primary', size = 'md', children, disabled, ...props }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      const handleOutside = (e: MouseEvent) => {
+        if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener('mousedown', handleOutside);
+      }
+      return () => document.removeEventListener('mousedown', handleOutside);
+    }, [isOpen]);
+
+    return (
+      <div ref={containerRef} className={cn('relative inline-flex', className)}>
+        <div ref={ref} className="inline-flex rounded-[var(--ui-radius-md)] shadow-sm">
+          <Button
+            variant={variant}
+            size={size}
+            disabled={disabled}
+            onClick={onMainClick}
+            className="rounded-r-none border-r border-white/20 dark:border-black/20"
+            {...props}
+          >
+            {children}
+          </Button>
+
+          <Button
+            variant={variant}
+            size={size}
+            disabled={disabled}
+            onClick={() => setIsOpen(!isOpen)}
+            aria-expanded={isOpen}
+            aria-haspopup="menu"
+            className="rounded-l-none px-2"
+          >
+            <ChevronDown className={cn('w-4 h-4 transition-transform duration-200', isOpen && 'rotate-180')} />
+          </Button>
+        </div>
+
+        {isOpen && (
+          <div className="absolute top-full right-0 mt-1 w-48 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-lg py-1 z-50 animate-in fade-in zoom-in-95">
+            {items.map((item, i) => (
+              <button
+                key={i}
+                type="button"
+                disabled={item.disabled}
+                onClick={() => {
+                  item.onClick();
+                  setIsOpen(false);
+                }}
+                className="w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-50 disabled:pointer-events-none transition-colors"
+              >
+                {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
+                <span className="flex-1 truncate">{item.label}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+SplitButton.displayName = 'SplitButton';