@arolariu/components 0.1.2 → 0.3.0

package/src/components/ui/flip-button.tsx

@@ -1,110 +1,89 @@
-"use client";
-
-import * as React from "react";
-import {
-  type HTMLMotionProps,
-  type Transition,
-  type Variant,
-  motion,
-} from "motion/react";
-
-import { cn } from "@/lib/utils";
-
-type FlipDirection = "top" | "bottom" | "left" | "righ";
-
-interface FlipButtonProps extends HTMLMotionProps<"button"> {
-  frontText: string;
-  backText: string;
-  transition?: Transition;
-  frontClassName?: string;
-  backClassName?: string;
-  from?: FlipDirection;
-}
-
-const defaultSpanClassName =
-  "absolute inset-0 flex items-center justify-center rounded-lg";
-
-const FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(
-  (
-    {
-      frontText,
-      backText,
-      transition = { type: "spring", stiffness: 280, damping: 20 },
-      className,
-      frontClassName,
-      backClassName,
-      from = "top",
-      ...props
-    },
-    ref,
-  ) => {
-    const isVertical = from === "top" || from === "bottom";
-    const rotateAxis = isVertical ? "rotateX" : "rotateY";
-
-    const frontOffset = from === "top" || from === "left" ? "50%" : "-50%";
-    const backOffset = from === "top" || from === "left" ? "-50%" : "50%";
-
-    const buildVariant = (
-      opacity: number,
-      rotation: number,
-      offset: string | null = null,
-    ): Variant => ({
-      opacity,
-      [rotateAxis]: rotation,
-      ...(isVertical && offset !== null ? { y: offset } : {}),
-      ...(!isVertical && offset !== null ? { x: offset } : {}),
-    });
-
-    const frontVariants = {
-      initial: buildVariant(1, 0, "0%"),
-      hover: buildVariant(0, 90, frontOffset),
-    };
-
-    const backVariants = {
-      initial: buildVariant(0, 90, backOffset),
-      hover: buildVariant(1, 0, "0%"),
-    };
-
-    return (
-      <motion.button
-        ref={ref}
-        initial="initial"
-        whileHover="hover"
-        whileTap={{ scale: 0.95 }}
-        className={cn(
-          "relative inline-block h-10 px-4 py-2 text-sm font-medium cursor-pointer perspective-[1000px] focus:outline-none",
-          className,
-        )}
-        {...props}
-      >
-        <motion.span
-          variants={frontVariants}
-          transition={transition}
-          className={cn(
-            defaultSpanClassName,
-            "bg-muted text-black dark:text-white",
-            frontClassName,
-          )}
-        >
-          {frontText}
-        </motion.span>
-        <motion.span
-          variants={backVariants}
-          transition={transition}
-          className={cn(
-            defaultSpanClassName,
-            "bg-primary text-primary-foreground",
-            backClassName,
-          )}
-        >
-          {backText}
-        </motion.span>
-        <span className="invisible">{frontText}</span>
-      </motion.button>
-    );
-  },
-);
-
-FlipButton.displayName = "FlipButton";
-
-export { FlipButton, type FlipButtonProps, type FlipDirection };
+"use client";
+
+import {type HTMLMotionProps, type Transition, type Variant, motion} from "motion/react";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+type FlipDirection = "top" | "bottom" | "left" | "righ";
+
+interface FlipButtonProps extends HTMLMotionProps<"button"> {
+  frontText: string;
+  backText: string;
+  transition?: Transition;
+  frontClassName?: string;
+  backClassName?: string;
+  from?: FlipDirection;
+}
+
+const defaultSpanClassName = "absolute inset-0 flex items-center justify-center rounded-lg";
+
+const FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(
+  (
+    {
+      frontText,
+      backText,
+      transition = {type: "spring", stiffness: 280, damping: 20},
+      className,
+      frontClassName,
+      backClassName,
+      from = "top",
+      ...props
+    },
+    ref,
+  ) => {
+    const isVertical = from === "top" || from === "bottom";
+    const rotateAxis = isVertical ? "rotateX" : "rotateY";
+
+    const frontOffset = from === "top" || from === "left" ? "50%" : "-50%";
+    const backOffset = from === "top" || from === "left" ? "-50%" : "50%";
+
+    const buildVariant = (opacity: number, rotation: number, offset: string | null = null): Variant => ({
+      opacity,
+      [rotateAxis]: rotation,
+      ...(isVertical && offset !== null ? {y: offset} : {}),
+      ...(!isVertical && offset !== null ? {x: offset} : {}),
+    });
+
+    const frontVariants = {
+      initial: buildVariant(1, 0, "0%"),
+      hover: buildVariant(0, 90, frontOffset),
+    };
+
+    const backVariants = {
+      initial: buildVariant(0, 90, backOffset),
+      hover: buildVariant(1, 0, "0%"),
+    };
+
+    return (
+      <motion.button
+        ref={ref}
+        initial='initial'
+        whileHover='hover'
+        whileTap={{scale: 0.95}}
+        className={cn(
+          "relative inline-block h-10 cursor-pointer px-4 py-2 text-sm font-medium perspective-[1000px] focus:outline-none",
+          className,
+        )}
+        {...props}>
+        <motion.span
+          variants={frontVariants}
+          transition={transition}
+          className={cn(defaultSpanClassName, "bg-muted text-black dark:text-white", frontClassName)}>
+          {frontText}
+        </motion.span>
+        <motion.span
+          variants={backVariants}
+          transition={transition}
+          className={cn(defaultSpanClassName, "bg-primary text-primary-foreground", backClassName)}>
+          {backText}
+        </motion.span>
+        <span className='invisible'>{frontText}</span>
+      </motion.button>
+    );
+  },
+);
+
+FlipButton.displayName = "FlipButton";
+
+export {FlipButton, type FlipButtonProps, type FlipDirection};

package/src/components/ui/form.tsx

@@ -1,174 +1,144 @@
-"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,
-};
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import {Slot} from "@radix-ui/react-slot";
+import * as React from "react";
+import {Controller, FormProvider, useFormContext, type ControllerProps, type FieldPath, type FieldValues} from "react-hook-form";
+
+import {Label} from "@/components/ui/label";
+import {cn} from "@/lib/utilities";
+
+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, formState} = useFormContext();
+
+  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);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{id}}>
+      <div
+        ref={ref}
+        className={cn("space-y-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({className, ...props}, ref) => {
+  const {error, formItemId} = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-red-500 dark:text-red-900", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(({...props}, ref) => {
+  const {error, formItemId, formDescriptionId, formMessageId} = useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({className, ...props}, ref) => {
+  const {formDescriptionId} = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-neutral-500 dark:text-neutral-400", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({className, children, ...props}, ref) => {
+    const {error, formMessageId} = useFormField();
+    const body = error ? String(error?.message ?? "") : children;
+
+    if (!body) {
+      return null;
+    }
+
+    return (
+      <p
+        ref={ref}
+        id={formMessageId}
+        className={cn("text-[0.8rem] font-medium text-red-500 dark:text-red-900", className)}
+        {...props}>
+        {body}
+      </p>
+    );
+  },
+);
+FormMessage.displayName = "FormMessage";
+
+export {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField};

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

@@ -1,43 +1,30 @@
-"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 };
+"use client";
+
+import {HTMLMotionProps, motion, type Transition} from "motion/react";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+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};