@thangnqdev/ui 0.1.2 → 0.2.0

package/src/typography/Label.tsx

@@ -1,47 +1,47 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const labelVariants = cva(
-  'text-sm font-medium leading-none select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[var(--ui-text-primary)] inline-flex items-center gap-1',
-  {
-    variants: {
-      size: {
-        sm: 'text-xs',
-        md: 'text-sm',
-        lg: 'text-base',
-      },
-      error: {
-        true: 'text-[var(--ui-error)]',
-        false: '',
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-      error: false,
-    },
-  }
-);
-
-export interface LabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement>,
-    VariantProps<typeof labelVariants> {
-  required?: boolean;
-}
-
-export const Label = forwardRef<HTMLLabelElement, LabelProps>(
-  ({ className, size, error, required, children, ...props }, ref) => {
-    return (
-      <label
-        ref={ref}
-        className={cn(labelVariants({ size, error }), className)}
-        {...props}
-      >
-        {children}
-        {required && <span className="text-[var(--ui-error)] ml-0.5" aria-hidden="true">*</span>}
-      </label>
-    );
-  }
-);
-
-Label.displayName = 'Label';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const labelVariants = cva(
+  'text-sm font-medium leading-none select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[var(--ui-text-primary)] inline-flex items-center gap-1',
+  {
+    variants: {
+      size: {
+        sm: 'text-xs',
+        md: 'text-sm',
+        lg: 'text-base',
+      },
+      error: {
+        true: 'text-[var(--ui-error)]',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      error: false,
+    },
+  }
+);
+
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement>,
+    VariantProps<typeof labelVariants> {
+  required?: boolean;
+}
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, size, error, required, children, ...props }, ref) => {
+    return (
+      <label
+        ref={ref}
+        className={cn(labelVariants({ size, error }), className)}
+        {...props}
+      >
+        {children}
+        {required && <span className="text-[var(--ui-error)] ml-0.5" aria-hidden="true">*</span>}
+      </label>
+    );
+  }
+);
+
+Label.displayName = 'Label';

package/src/typography/Link.tsx

@@ -1,56 +1,56 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { ExternalLink } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export const linkVariants = cva(
-  'inline-flex items-center gap-1 font-medium transition-colors cursor-pointer text-[var(--ui-primary)] hover:text-[var(--ui-primary-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] rounded-sm',
-  {
-    variants: {
-      underline: {
-        always: 'underline underline-offset-4',
-        hover: 'hover:underline underline-offset-4',
-        none: 'no-underline',
-      },
-      variant: {
-        primary: 'text-[var(--ui-primary)] hover:text-[var(--ui-primary-hover)]',
-        secondary: 'text-[var(--ui-text-secondary)] hover:text-[var(--ui-text-primary)]',
-        muted: 'text-[var(--ui-text-muted)] hover:text-[var(--ui-text-secondary)]',
-      },
-    },
-    defaultVariants: {
-      underline: 'hover',
-      variant: 'primary',
-    },
-  }
-);
-
-export interface LinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    VariantProps<typeof linkVariants> {
-  external?: boolean;
-  showExternalIcon?: boolean;
-}
-
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ className, underline, variant, external, showExternalIcon = true, children, ...props }, ref) => {
-    const isExternal = external ?? (props.href?.startsWith('http') || props.target === '_blank');
-
-    return (
-      <a
-        ref={ref}
-        target={isExternal ? '_blank' : props.target}
-        rel={isExternal ? 'noopener noreferrer' : props.rel}
-        className={cn(linkVariants({ underline, variant }), className)}
-        {...props}
-      >
-        {children}
-        {isExternal && showExternalIcon && (
-          <ExternalLink className="w-3.5 h-3.5 opacity-70 inline-block ml-0.5 flex-shrink-0" />
-        )}
-      </a>
-    );
-  }
-);
-
-Link.displayName = 'Link';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ExternalLink } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const linkVariants = cva(
+  'inline-flex items-center gap-1 font-medium transition-colors cursor-pointer text-[var(--ui-primary)] hover:text-[var(--ui-primary-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] rounded-sm',
+  {
+    variants: {
+      underline: {
+        always: 'underline underline-offset-4',
+        hover: 'hover:underline underline-offset-4',
+        none: 'no-underline',
+      },
+      variant: {
+        primary: 'text-[var(--ui-primary)] hover:text-[var(--ui-primary-hover)]',
+        secondary: 'text-[var(--ui-text-secondary)] hover:text-[var(--ui-text-primary)]',
+        muted: 'text-[var(--ui-text-muted)] hover:text-[var(--ui-text-secondary)]',
+      },
+    },
+    defaultVariants: {
+      underline: 'hover',
+      variant: 'primary',
+    },
+  }
+);
+
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof linkVariants> {
+  external?: boolean;
+  showExternalIcon?: boolean;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ className, underline, variant, external, showExternalIcon = true, children, ...props }, ref) => {
+    const isExternal = external ?? (props.href?.startsWith('http') || props.target === '_blank');
+
+    return (
+      <a
+        ref={ref}
+        target={isExternal ? '_blank' : props.target}
+        rel={isExternal ? 'noopener noreferrer' : props.rel}
+        className={cn(linkVariants({ underline, variant }), className)}
+        {...props}
+      >
+        {children}
+        {isExternal && showExternalIcon && (
+          <ExternalLink className="w-3.5 h-3.5 opacity-70 inline-block ml-0.5 flex-shrink-0" />
+        )}
+      </a>
+    );
+  }
+);
+
+Link.displayName = 'Link';

package/src/typography/Text.tsx

@@ -1,62 +1,62 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const textVariants = cva('leading-relaxed', {
-  variants: {
-    variant: {
-      body: 'text-base text-[var(--ui-text-primary)]',
-      lead: 'text-lg sm:text-xl text-[var(--ui-text-secondary)] font-normal leading-relaxed',
-      muted: 'text-sm text-[var(--ui-text-muted)]',
-      small: 'text-xs text-[var(--ui-text-secondary)] font-normal',
-      caption: 'text-xs text-[var(--ui-text-muted)] uppercase tracking-wider font-semibold',
-      destructive: 'text-sm text-[var(--ui-error)] font-medium',
-      success: 'text-sm text-[var(--ui-success)] font-medium',
-    },
-    weight: {
-      light: 'font-light',
-      normal: 'font-normal',
-      medium: 'font-medium',
-      semibold: 'font-semibold',
-      bold: 'font-bold',
-    },
-    align: {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
-      justify: 'text-justify',
-    },
-    truncate: {
-      true: 'truncate',
-      false: '',
-    },
-  },
-  defaultVariants: {
-    variant: 'body',
-    weight: 'normal',
-    align: 'left',
-    truncate: false,
-  },
-});
-
-export interface TextProps
-  extends React.HTMLAttributes<HTMLElement>,
-    VariantProps<typeof textVariants> {
-  as?: React.ElementType;
-}
-
-export const Text = forwardRef<HTMLElement, TextProps>(
-  ({ className, variant, weight, align, truncate, as: Component = 'p', children, ...props }, ref) => {
-    return (
-      <Component
-        ref={ref}
-        className={cn(textVariants({ variant, weight, align, truncate }), className)}
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
-
-Text.displayName = 'Text';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const textVariants = cva('leading-relaxed', {
+  variants: {
+    variant: {
+      body: 'text-base text-[var(--ui-text-primary)]',
+      lead: 'text-lg sm:text-xl text-[var(--ui-text-secondary)] font-normal leading-relaxed',
+      muted: 'text-sm text-[var(--ui-text-muted)]',
+      small: 'text-xs text-[var(--ui-text-secondary)] font-normal',
+      caption: 'text-xs text-[var(--ui-text-muted)] uppercase tracking-wider font-semibold',
+      destructive: 'text-sm text-[var(--ui-error)] font-medium',
+      success: 'text-sm text-[var(--ui-success)] font-medium',
+    },
+    weight: {
+      light: 'font-light',
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+    },
+    align: {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+      justify: 'text-justify',
+    },
+    truncate: {
+      true: 'truncate',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'body',
+    weight: 'normal',
+    align: 'left',
+    truncate: false,
+  },
+});
+
+export interface TextProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof textVariants> {
+  as?: React.ElementType;
+}
+
+export const Text = forwardRef<HTMLElement, TextProps>(
+  ({ className, variant, weight, align, truncate, as: Component = 'p', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(textVariants({ variant, weight, align, truncate }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Text.displayName = 'Text';

package/src/typography/index.ts

@@ -1,7 +1,7 @@
-export * from './Heading';
-export * from './Text';
-export * from './Label';
-export * from './Link';
-export * from './Code';
-export * from './Blockquote';
-export * from './Kbd';
+export * from './Heading';
+export * from './Text';
+export * from './Label';
+export * from './Link';
+export * from './Code';
+export * from './Blockquote';
+export * from './Kbd';

package/src/typography/tokens.css

@@ -1,5 +1,5 @@
-/* Typography Tokens */
-:root {
-  --ui-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
+/* Typography Tokens */
+:root {
+  --ui-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}

package/src/utils/cn.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utils/scroll-lock.ts

@@ -0,0 +1,19 @@
+let lockCount = 0;
+let previousOverflow = '';
+
+export function lockBodyScroll() {
+  if (typeof document === 'undefined') return;
+  if (lockCount === 0) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+  lockCount++;
+}
+
+export function unlockBodyScroll() {
+  if (typeof document === 'undefined') return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = previousOverflow;
+  }
+}

package/src/utils/useControllableState.ts

@@ -0,0 +1,54 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+export interface UseControllableStateProps<T> {
+  value?: T;
+  defaultValue?: T | (() => T);
+  onChange?: (value: T) => void;
+  name?: string;
+}
+
+/**
+ * Standard controllable state hook for managing controlled & uncontrolled component states.
+ * Guarantees strict single source-of-truth:
+ * - When `value !== undefined`, state is controlled by parent.
+ * - When `value === undefined`, state is maintained internally starting from `defaultValue`.
+ * - Prevents UI desync when parent rejects an update.
+ */
+export function useControllableState<T>({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  name,
+}: UseControllableStateProps<T>): [T, (next: T | ((prev: T) => T)) => void, boolean] {
+  const isControlled = controlledValue !== undefined;
+  const isControlledRef = useRef(isControlled);
+
+  // Warn against uncontrolled <-> controlled flips in development
+  useEffect(() => {
+    if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production' && isControlledRef.current !== isControlled) {
+      console.warn(
+        `[${name || 'Component'}] is changing from ${
+          isControlledRef.current ? 'controlled' : 'uncontrolled'
+        } to ${isControlled ? 'controlled' : 'uncontrolled'}. Check the value/defaultValue props.`
+      );
+    }
+    isControlledRef.current = isControlled;
+  }, [isControlled, name]);
+
+  const [internalState, setInternalState] = useState<T>(defaultValue as T);
+
+  const value = isControlled ? (controlledValue as T) : internalState;
+
+  const setValue = useCallback(
+    (next: T | ((prev: T) => T)) => {
+      const nextValue = typeof next === 'function' ? (next as (prev: T) => T)(value) : next;
+      if (!isControlled) {
+        setInternalState(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, value, onChange]
+  );
+
+  return [value, setValue, isControlled];
+}