@arolariu/components 0.0.35 → 0.0.37

package/src/components/ui/form.tsx

@@ -1,173 +1,174 @@
-"use client";
-
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-  useFormState,
-} from "react-hook-form";
-import { cn } from "./../../lib/utils";
-import { Label } from "./label";
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-);
-
-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  );
-}
-
-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn(
-        "data-[error=true]:text-neutral-50 dark:data-[error=true]:text-neutral-50",
-        className
-      )}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-}
-
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-
-  return (
-    <Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn(
-        "text-neutral-500 text-sm dark:text-neutral-400",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : props.children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-neutral-50 text-sm dark:text-neutral-50", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-}
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn(
+        "data-[error=true]:text-red-500 dark:data-[error=true]:text-red-900",
+        className
+      )}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn(
+        "text-neutral-500 text-sm dark:text-neutral-400",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-red-500 text-sm dark:text-red-900", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

package/src/components/ui/gradient-background.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as React from "react";
+import { HTMLMotionProps, motion, type Transition } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+interface GradientBackgroundProps extends HTMLMotionProps<"div"> {
+  transition?: Transition;
+}
+
+const GradientBackground = React.forwardRef<
+  HTMLDivElement,
+  GradientBackgroundProps
+>(
+  (
+    {
+      className,
+      transition = { duration: 15, ease: "easeInOut", repeat: Infinity },
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <motion.div
+        ref={ref}
+        className={cn(
+          "size-full bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 bg-[length:400%_400%]",
+          className
+        )}
+        animate={{
+          backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
+        }}
+        transition={transition}
+        {...props}
+      />
+    );
+  }
+);
+
+GradientBackground.displayName = "GradientBackground";
+
+export { GradientBackground, type GradientBackgroundProps };

package/src/components/ui/gradient-text.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import * as React from "react";
+import { motion, type Transition } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+interface GradientTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+  text: string;
+  gradient?: string;
+  neon?: boolean;
+  transition?: Transition;
+}
+
+const GradientText = React.forwardRef<HTMLSpanElement, GradientTextProps>(
+  (
+    {
+      text,
+      className,
+      gradient = "linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)",
+      neon = false,
+      transition = { duration: 50, repeat: Infinity, ease: "linear" },
+      ...props
+    },
+    ref
+  ) => {
+    const baseStyle: React.CSSProperties = {
+      backgroundImage: gradient,
+    };
+
+    return (
+      <span
+        ref={ref}
+        className={cn("relative inline-block", className)}
+        {...props}
+      >
+        <motion.span
+          className="m-0 text-transparent bg-clip-text bg-[length:700%_100%] bg-[position:0%_0%]"
+          style={baseStyle}
+          initial={{ backgroundPosition: "0% 0%" }}
+          animate={{ backgroundPosition: "500% 100%" }}
+          transition={transition}
+        >
+          {text}
+        </motion.span>
+
+        {neon && (
+          <motion.span
+            className="m-0 absolute top-0 left-0 text-transparent bg-clip-text blur-[8px] mix-blend-plus-lighter bg-[length:700%_100%] bg-[position:0%_0%]"
+            style={baseStyle}
+            initial={{ backgroundPosition: "0% 0%" }}
+            animate={{ backgroundPosition: "500% 100%" }}
+            transition={transition}
+          >
+            {text}
+          </motion.span>
+        )}
+      </span>
+    );
+  }
+);
+
+GradientText.displayName = "GradientText";
+
+export { GradientText, type GradientTextProps };

package/src/components/ui/highlight-text.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import * as React from "react";
+import {
+  motion,
+  useInView,
+  type HTMLMotionProps,
+  type Transition,
+  type UseInViewOptions,
+} from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+interface HighlightTextProps extends HTMLMotionProps<"span"> {
+  text: string;
+  inView?: boolean;
+  inViewMargin?: UseInViewOptions["margin"];
+  inViewOnce?: boolean;
+  transition?: Transition;
+}
+
+const animation = { backgroundSize: "100% 100%" };
+
+const HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(
+  (
+    {
+      text,
+      className,
+      inView = false,
+      inViewMargin = "0px",
+      transition = { duration: 2, ease: "easeInOut" },
+      ...props
+    },
+    ref
+  ) => {
+    const localRef = React.useRef<HTMLSpanElement>(null);
+    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);
+
+    const inViewResult = useInView(localRef, {
+      once: true,
+      margin: inViewMargin,
+    });
+    const isInView = !inView || inViewResult;
+
+    return (
+      <motion.span
+        ref={localRef}
+        initial={{
+          backgroundSize: "0% 100%",
+        }}
+        animate={isInView ? animation : undefined}
+        transition={transition}
+        style={{
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "left center",
+          display: "inline",
+        }}
+        className={cn(
+          `relative inline-block px-2 py-1 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-500 dark:to-purple-500`,
+          className
+        )}
+        {...props}
+      >
+        {text}
+      </motion.span>
+    );
+  }
+);
+HighlightText.displayName = "HighlightText";
+
+export { HighlightText, type HighlightTextProps };