@lp-labs/ui-components 0.0.0-stage → 1.0.0

package/dist/esm/components/Dropdown.d.ts

@@ -0,0 +1,139 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+  trigger: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
+  (
+    {
+      trigger,
+      open: controlledOpen,
+      onOpenChange,
+      children,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = useState(controlledOpen ?? false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    const open = controlledOpen ?? isOpen;
+
+    const handleToggle = () => {
+      const newOpen = !open;
+      setIsOpen(newOpen);
+      onOpenChange?.(newOpen);
+    };
+
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+          setIsOpen(false);
+          onOpenChange?.(false);
+        }
+      };
+
+      if (open) {
+        document.addEventListener('mousedown', handleClickOutside);
+      }
+
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [open, onOpenChange]);
+
+    return (
+      <div
+        ref={ref || dropdownRef}
+        className={cn('relative inline-block', className)}
+        {...props}
+      >
+        <button
+          onClick={handleToggle}
+          className="flex items-center gap-2"
+          aria-haspopup="true"
+          aria-expanded={open}
+        >
+          {trigger}
+        </button>
+
+        {open && (
+          <div className="absolute top-full left-0 mt-2 min-w-max bg-white border border-gray-200 rounded-lg shadow-lg z-50">
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+Dropdown.displayName = 'Dropdown';
+
+export interface DropdownItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode;
+  divider?: boolean;
+}
+
+export const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
+  (
+    {
+      icon,
+      divider,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    if (divider) {
+      return <div className="border-t border-gray-100" />;
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          'w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors',
+          'flex items-center gap-2',
+          className,
+        )}
+        {...props}
+      >
+        {icon && <span className="flex-shrink-0">{icon}</span>}
+        {children}
+      </button>
+    );
+  },
+);
+
+DropdownItem.displayName = 'DropdownItem';
+
+export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
+  (
+    {
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      className={cn('py-1', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+
+DropdownMenu.displayName = 'DropdownMenu';

package/dist/esm/components/Dropdown.js

@@ -0,0 +1,139 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+  trigger: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
+  (
+    {
+      trigger,
+      open: controlledOpen,
+      onOpenChange,
+      children,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = useState(controlledOpen ?? false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    const open = controlledOpen ?? isOpen;
+
+    const handleToggle = () => {
+      const newOpen = !open;
+      setIsOpen(newOpen);
+      onOpenChange?.(newOpen);
+    };
+
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+          setIsOpen(false);
+          onOpenChange?.(false);
+        }
+      };
+
+      if (open) {
+        document.addEventListener('mousedown', handleClickOutside);
+      }
+
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [open, onOpenChange]);
+
+    return (
+      <div
+        ref={ref || dropdownRef}
+        className={cn('relative inline-block', className)}
+        {...props}
+      >
+        <button
+          onClick={handleToggle}
+          className="flex items-center gap-2"
+          aria-haspopup="true"
+          aria-expanded={open}
+        >
+          {trigger}
+        </button>
+
+        {open && (
+          <div className="absolute top-full left-0 mt-2 min-w-max bg-white border border-gray-200 rounded-lg shadow-lg z-50">
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+Dropdown.displayName = 'Dropdown';
+
+export interface DropdownItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode;
+  divider?: boolean;
+}
+
+export const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
+  (
+    {
+      icon,
+      divider,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    if (divider) {
+      return <div className="border-t border-gray-100" />;
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          'w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors',
+          'flex items-center gap-2',
+          className,
+        )}
+        {...props}
+      >
+        {icon && <span className="flex-shrink-0">{icon}</span>}
+        {children}
+      </button>
+    );
+  },
+);
+
+DropdownItem.displayName = 'DropdownItem';
+
+export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
+  (
+    {
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      className={cn('py-1', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+
+DropdownMenu.displayName = 'DropdownMenu';

package/dist/esm/components/Form.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  layout?: 'vertical' | 'horizontal' | 'grid';
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const Form = React.forwardRef<HTMLFormElement, FormProps>(
+  (
+    {
+      onSubmit,
+      layout = 'vertical',
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const layoutClasses = {
+      vertical: 'flex flex-col gap-4',
+      horizontal: 'flex flex-row gap-4',
+      grid: 'grid grid-cols-2 gap-4',
+    };
+
+    return (
+      <form
+        ref={ref}
+        onSubmit={onSubmit}
+        className={cn(layoutClasses[layout], className)}
+        {...props}
+      >
+        {children}
+      </form>
+    );
+  }
+);
+
+Form.displayName = 'Form';

package/dist/esm/components/Form.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  layout?: 'vertical' | 'horizontal' | 'grid';
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const Form = React.forwardRef<HTMLFormElement, FormProps>(
+  (
+    {
+      onSubmit,
+      layout = 'vertical',
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const layoutClasses = {
+      vertical: 'flex flex-col gap-4',
+      horizontal: 'flex flex-row gap-4',
+      grid: 'grid grid-cols-2 gap-4',
+    };
+
+    return (
+      <form
+        ref={ref}
+        onSubmit={onSubmit}
+        className={cn(layoutClasses[layout], className)}
+        {...props}
+      >
+        {children}
+      </form>
+    );
+  }
+);
+
+Form.displayName = 'Form';

package/dist/esm/components/FormGroup.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface FormGroupProps {
+  label?: string;
+  required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  helperText?: string;
+  children: React.ReactNode;
+  className?: string;
+  layout?: 'vertical' | 'horizontal';
+}
+
+export const FormGroup = React.forwardRef<HTMLDivElement, FormGroupProps>(
+  (
+    {
+      label,
+      required = false,
+      error = false,
+      errorMessage,
+      helperText,
+      children,
+      className,
+      layout = 'vertical',
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          {
+            'flex flex-col gap-1': layout === 'vertical',
+            'flex items-start gap-4': layout === 'horizontal',
+          },
+          className
+        )}
+      >
+        {label && (
+          <label className={cn('block text-sm font-medium text-gray-700', { 'text-red-600': error })}>
+            {label}
+            {required && <span className="ml-1 text-red-500">*</span>}
+          </label>
+        )}
+        <div className="w-full">{children}</div>
+        {error && errorMessage && (
+          <p className="text-sm text-red-600 mt-1">{errorMessage}</p>
+        )}
+        {!error && helperText && (
+          <p className="text-sm text-gray-500 mt-1">{helperText}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+FormGroup.displayName = 'FormGroup';

package/dist/esm/components/FormGroup.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface FormGroupProps {
+  label?: string;
+  required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  helperText?: string;
+  children: React.ReactNode;
+  className?: string;
+  layout?: 'vertical' | 'horizontal';
+}
+
+export const FormGroup = React.forwardRef<HTMLDivElement, FormGroupProps>(
+  (
+    {
+      label,
+      required = false,
+      error = false,
+      errorMessage,
+      helperText,
+      children,
+      className,
+      layout = 'vertical',
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          {
+            'flex flex-col gap-1': layout === 'vertical',
+            'flex items-start gap-4': layout === 'horizontal',
+          },
+          className
+        )}
+      >
+        {label && (
+          <label className={cn('block text-sm font-medium text-gray-700', { 'text-red-600': error })}>
+            {label}
+            {required && <span className="ml-1 text-red-500">*</span>}
+          </label>
+        )}
+        <div className="w-full">{children}</div>
+        {error && errorMessage && (
+          <p className="text-sm text-red-600 mt-1">{errorMessage}</p>
+        )}
+        {!error && helperText && (
+          <p className="text-sm text-gray-500 mt-1">{helperText}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+FormGroup.displayName = 'FormGroup';