aura-glass/dist/esm/components/input/GlassForm.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import React from 'react';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { cn } from '../../lib/utilsComprehensive.js';
import { Slot } from '@radix-ui/react-slot';
import { AlertCircle } from 'lucide-react';
import { FormProvider, useFormContext } from 'react-hook-form';
import { GlassLabel } from './GlassLabel.js';

// Form root is just the FormProvider
const GlassForm = FormProvider;
const FormFieldContext = /*#__PURE__*/React.createContext({});
const FormItemContext = /*#__PURE__*/React.createContext({});
const GlassFormItem = /*#__PURE__*/React.forwardRef(({
  className,
  spacing = 'md',
  glass = false,
  ...props
}, ref) => {
  const id = React.useId();
  const spacingConfig = {
    sm: 'glass-auto-gap glass-auto-gap-xs',
    md: 'glass-auto-gap glass-auto-gap-sm',
    lg: 'glass-auto-gap glass-auto-gap-md'
  };
  return jsx(FormItemContext.Provider, {
    value: {
      id
    },
    children: glass ? jsx(OptimizedGlassCore, {
      elevation: 'level1',
      intensity: "medium",
      depth: 2,
      tint: "neutral",
      border: "subtle",
      animation: "none",
      performanceMode: "medium",
      ref: ref,
      className: cn('glass-form-item glass-contrast-guard', spacingConfig?.[spacing], className),
      ...props
    }) : jsx("div", {
      ref: ref,
      className: cn('glass-form-item', spacingConfig?.[spacing], className),
      ...props
    })
  });
});
GlassFormItem.displayName = "GlassFormItem";
const GlassFormLabel = /*#__PURE__*/React.forwardRef(({
  className,
  size = 'md',
  required = false,
  ...props
}, ref) => {
  const {
    error,
    formItemId
  } = useFormField();
  return jsx(GlassLabel, {
    ref: ref,
    size: size,
    required: required,
    className: cn('glass-form-label', error && "text-red-400", className),
    htmlFor: formItemId,
    ...props
  });
});
GlassFormLabel.displayName = "GlassFormLabel";
const GlassFormControl = /*#__PURE__*/React.forwardRef(({
  className,
  glass = false,
  ...props
}, ref) => {
  const {
    error,
    formItemId,
    formDescriptionId,
    formMessageId
  } = useFormField();
  return jsx(Slot, {
    ref: ref,
    id: formItemId,
    className: cn('glass-form-control', glass && ['glass-backdrop-blur-md bg-background/50', 'border border-border/20 glass-radius-lg'], className),
    "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
    "aria-invalid": !!error,
    ...props
  });
});
GlassFormControl.displayName = "GlassFormControl";
const GlassFormDescription = /*#__PURE__*/React.forwardRef(({
  className,
  size = 'sm',
  variant = 'muted',
  ...props
}, ref) => {
  const {
    formDescriptionId
  } = useFormField();
  const sizeConfig = {
    xs: 'glass-text-xs',
    sm: 'glass-text-sm',
    md: 'glass-text-base'
  };
  const variantConfig = {
    default: 'text-foreground',
    muted: 'glass-text-secondary',
    accent: 'text-primary'
  };
  return jsx("p", {
    ref: ref,
    id: formDescriptionId,
    className: cn('glass-form-description', sizeConfig?.[size], variantConfig?.[variant], className),
    ...props
  });
});
GlassFormDescription.displayName = "GlassFormDescription";
const GlassFormMessage = /*#__PURE__*/React.forwardRef(({
  className,
  children,
  size = 'sm',
  variant = 'error',
  showIcon = true,
  ...props
}, ref) => {
  const {
    error,
    formMessageId
  } = useFormField();
  const body = error ? String(error?.message) : children;
  if (!body) {
    return null;
  }
  const sizeConfig = {
    xs: 'glass-text-xs',
    sm: 'glass-text-sm',
    md: 'glass-text-base'
  };
  const variantConfig = {
    error: 'text-red-400',
    warning: 'text-amber-400',
    success: 'text-green-400',
    info: 'text-blue-400'
  };
  const iconSize = {
    xs: 'h-3 w-3',
    sm: 'h-4 w-4',
    md: 'h-5 w-5'
  };
  return jsxs("p", {
    ref: ref,
    id: formMessageId,
    className: cn('glass-form-message font-medium flex items-center glass-gap-1.5', sizeConfig?.[size], variantConfig?.[variant], className),
    ...props,
    children: [showIcon && variant === 'error' && jsx(AlertCircle, {
      className: iconSize?.[size]
    }), body]
  });
});
GlassFormMessage.displayName = "GlassFormMessage";
// Custom hook for form field state
const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext);
  const itemContext = React.useContext(FormItemContext);
  const {
    getFieldState,
    formState
  } = useFormContext();
  const fieldState = getFieldState(fieldContext.name, formState);
  if (!fieldContext) {
    throw new Error("useFormField should be used within <GlassFormField>");
  }
  const {
    id
  } = itemContext;
  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState
  };
};

export { GlassForm as Form, GlassFormControl as FormControl, GlassFormDescription as FormDescription, GlassFormItem as FormItem, GlassFormLabel as FormLabel, GlassFormMessage as FormMessage, GlassForm, GlassFormControl, GlassFormDescription, GlassFormItem, GlassFormLabel, GlassFormMessage, GlassForm as default, useFormField, useFormField as useGlassFormField };
//# sourceMappingURL=GlassForm.js.map