@thangnqdev/ui 0.1.1 → 0.2.0

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;
+}

package/src/forms/Checkbox.tsx

@@ -1,69 +1,149 @@
-import React, { forwardRef } from 'react';
-import { Check, Minus } from 'lucide-react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { useFormField } from './FormField';
-import { cn } from '../utils/cn';
-
-export const checkboxVariants = cva(
-  'peer shrink-0 rounded-[var(--ui-radius-sm)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 transition-all cursor-pointer flex items-center justify-center text-[var(--ui-primary-fg)]',
-  {
-    variants: {
-      size: {
-        sm: 'w-4 h-4 text-xs',
-        md: 'w-5 h-5 text-sm',
-        lg: 'w-6 h-6 text-base',
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-    },
-  }
-);
-
-export interface CheckboxProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
-    VariantProps<typeof checkboxVariants> {
-  indeterminate?: boolean;
-  label?: React.ReactNode;
-}
-
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, size, indeterminate = false, label, checked, disabled, id, onChange, ...props }, ref) => {
-    const formField = useFormField();
-    const isDisabled = disabled ?? formField?.isDisabled ?? false;
-    const checkboxId = id || formField?.id;
-
-    return (
-      <label className={cn('inline-flex items-center gap-2 select-none cursor-pointer', isDisabled && 'cursor-not-allowed opacity-50')}>
-        <div className="relative flex items-center justify-center">
-          <input
-            ref={ref}
-            type="checkbox"
-            id={checkboxId}
-            disabled={isDisabled}
-            checked={checked}
-            onChange={onChange}
-            className="sr-only peer"
-            {...props}
-          />
-          <div
-            className={cn(
-              checkboxVariants({ size }),
-              (checked || indeterminate) && 'bg-[var(--ui-primary)] border-[var(--ui-primary)]',
-              className
-            )}
-          >
-            {indeterminate ? (
-              <Minus className="w-3.5 h-3.5 stroke-[3]" />
-            ) : (
-              checked && <Check className="w-3.5 h-3.5 stroke-[3]" />
-            )}
-          </div>
-        </div>
-        {label && <span className="text-sm font-medium text-[var(--ui-text-primary)]">{label}</span>}
-      </label>
-    );
-  }
-);
-
-Checkbox.displayName = 'Checkbox';
+import React, { forwardRef, useState, useEffect, useRef, useImperativeHandle } from 'react';
+import { Check, Minus } from 'lucide-react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { useFormField } from './FormField';
+import { useCheckboxGroup } from './CheckboxGroup';
+import { cn } from '../utils/cn';
+
+export const checkboxVariants = cva(
+  'peer shrink-0 rounded-[var(--ui-radius-sm)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] transition-all flex items-center justify-center text-[var(--ui-primary-fg)] peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--ui-primary)] peer-focus-visible:ring-offset-2',
+  {
+    variants: {
+      size: {
+        sm: 'w-4 h-4 text-xs',
+        md: 'w-5 h-5 text-sm',
+        lg: 'w-6 h-6 text-base',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'>,
+    VariantProps<typeof checkboxVariants> {
+  indeterminate?: boolean;
+  label?: React.ReactNode;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      className,
+      size,
+      indeterminate = false,
+      label,
+      checked,
+      defaultChecked = false,
+      disabled,
+      id,
+      name,
+      value: propValue,
+      onChange,
+      onCheckedChange,
+      ...props
+    },
+    ref
+  ) => {
+    const formField = useFormField();
+    const group = useCheckboxGroup();
+
+    const isGroupMember = group !== null && propValue !== undefined;
+    const isDisabled = disabled ?? group?.disabled ?? formField?.isDisabled ?? false;
+    const checkboxId = id || formField?.id;
+    const checkboxName = name || group?.name;
+
+    const isControlled = checked !== undefined;
+    const [internalChecked, setInternalChecked] = useState<boolean>(defaultChecked);
+
+    const isChecked = isGroupMember
+      ? group.value.includes(String(propValue))
+      : isControlled
+      ? Boolean(checked)
+      : internalChecked;
+
+    const innerRef = useRef<HTMLInputElement>(null);
+    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);
+
+    useEffect(() => {
+      if (innerRef.current) {
+        innerRef.current.indeterminate = Boolean(indeterminate);
+      }
+    }, [indeterminate]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (isDisabled) return;
+      const newChecked = e.target.checked;
+
+      if (!isControlled && !isGroupMember) {
+        setInternalChecked(newChecked);
+      }
+
+      if (isGroupMember && group) {
+        const val = String(propValue);
+        const next = newChecked
+          ? [...group.value, val]
+          : group.value.filter((v) => v !== val);
+        group.onChange(next);
+      }
+
+      onChange?.(e);
+      onCheckedChange?.(newChecked);
+    };
+
+    const isVisualActive = isChecked || indeterminate;
+
+    return (
+      <label
+        className={cn(
+          'inline-flex items-center gap-2 select-none cursor-pointer group',
+          isDisabled && 'cursor-not-allowed opacity-50'
+        )}
+      >
+        <div className="relative flex items-center justify-center">
+          <input
+            ref={innerRef}
+            type="checkbox"
+            id={checkboxId}
+            name={checkboxName}
+            value={propValue}
+            disabled={isDisabled}
+            checked={isChecked}
+            onChange={handleChange}
+            aria-checked={indeterminate ? 'mixed' : isChecked}
+            className="sr-only peer"
+            {...props}
+          />
+          <div
+            className={cn(
+              checkboxVariants({ size }),
+              isVisualActive
+                ? 'bg-[var(--ui-primary)] border-[var(--ui-primary)] text-white'
+                : 'hover:border-[var(--ui-border-strong)]',
+              className
+            )}
+          >
+            {indeterminate ? (
+              <Minus className="w-3.5 h-3.5 stroke-[3]" />
+            ) : (
+              isChecked && <Check className="w-3.5 h-3.5 stroke-[3]" />
+            )}
+          </div>
+        </div>
+        {label && (
+          <span className="text-sm font-medium text-[var(--ui-text-primary)]">
+            {label}
+          </span>
+        )}
+      </label>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/forms/CheckboxGroup.tsx

@@ -1,29 +1,76 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../utils/cn';
-
-export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  orientation?: 'horizontal' | 'vertical';
-  value?: string[];
-  onChange?: (value: string[]) => void;
-}
-
-export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
-  ({ className, orientation = 'vertical', children, value, onChange, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        role="group"
-        className={cn(
-          'flex gap-2',
-          orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap items-center',
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-CheckboxGroup.displayName = 'CheckboxGroup';
+import React, { forwardRef, useState, createContext, useContext } from 'react';
+import { cn } from '../utils/cn';
+
+export interface CheckboxGroupContextValue {
+  value: string[];
+  onChange: (value: string[]) => void;
+  disabled?: boolean;
+  name?: string;
+}
+
+export const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null);
+
+export const useCheckboxGroup = () => useContext(CheckboxGroupContext);
+
+export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  orientation?: 'horizontal' | 'vertical';
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (value: string[]) => void;
+  disabled?: boolean;
+  name?: string;
+}
+
+export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  (
+    {
+      className,
+      orientation = 'vertical',
+      children,
+      value: controlledValue,
+      defaultValue = [],
+      onChange,
+      disabled,
+      name,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = useState<string[]>(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+
+    const handleValueChange = (nextValue: string[]) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onChange?.(nextValue);
+    };
+
+    return (
+      <CheckboxGroupContext.Provider
+        value={{
+          value,
+          onChange: handleValueChange,
+          disabled,
+          name,
+        }}
+      >
+        <div
+          ref={ref}
+          role="group"
+          className={cn(
+            'flex gap-2',
+            orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap items-center',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </CheckboxGroupContext.Provider>
+    );
+  }
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';