@thangnqdev/ui 0.2.0 → 0.2.2

package/src/forms/Checkbox.tsx

@@ -1,149 +1,149 @@
-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';
+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,76 +1,76 @@
-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';
+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';