@granto-umbrella/umbrella-components 2.2.6 → 2.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -40,7 +40,8 @@
     "react-day-picker": "^9.6.7",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
-    "react-select": "^5.10.0"
+    "react-select": "^5.10.0",
+    "tailwind-merge": "^3.2.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.3",

package/src/components/molecules/Calendar/Calendar.tsx

@@ -1,31 +1,63 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker as RDPDayPicker } from "react-day-picker";
-import { StyledDayPicker } from "./Calendar.styles";
+import { DayPicker } from "react-day-picker";
 
-export type CalendarProps = React.ComponentProps<typeof RDPDayPicker>;
+import { cn } from "@/lib/utils";
 
-function Calendar({ className, ...props }: CalendarProps) {
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
   return (
-    <StyledDayPicker
-      className={className}
-      showOutsideDays={true}
-      components={
-        {
-          IconPrevious: ({ className, ...props }: { className?: string }) => (
-            <ChevronLeft className={className} {...props} />
-          ),
-          IconNext: ({ className, ...props }: { className?: string }) => (
-            <ChevronRight className={className} {...props} />
-          ),
-        } as unknown as any
-      }
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn("h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
       {...props}
     />
   );
 }
-
 Calendar.displayName = "Calendar";
 
 export { Calendar };

package/src/components/molecules/Popover/Popover.tsx

@@ -1,19 +1,25 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { StyledPopoverContent } from "./Popover.styles";
+
+import { cn } from "../../../lib/utils";
 
 const Popover = PopoverPrimitive.Root;
+
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
-    <StyledPopoverContent
+    <PopoverPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
       {...props}
     />
   </PopoverPrimitive.Portal>

package/src/components/organisms/Form/Form.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
@@ -8,14 +9,10 @@ import {
   FormProvider,
   useFormContext,
 } from "react-hook-form";
-import {
-  StyledFormItem,
-  StyledFormLabel,
-  StyledFormDescription,
-  StyledFormMessage,
-} from "./Form.styles";
 
-/* Reexporta o FormProvider como Form para facilitar o uso */
+import { cn } from "../../../lib/utils";
+import { Label } from "../../atoms/Label/Label";
+
 const Form = FormProvider;
 
 type FormFieldContextValue<
@@ -42,25 +39,6 @@ const FormField = <
   );
 };
 
-type FormItemContextValue = { id: string };
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-);
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ ...props }, ref) => {
-  const id = React.useId();
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <StyledFormItem ref={ref} {...props} />
-    </FormItemContext.Provider>
-  );
-});
-FormItem.displayName = "FormItem";
-
 const useFormField = () => {
   const fieldContext = React.useContext(FormFieldContext);
   const itemContext = React.useContext(FormItemContext);
@@ -73,6 +51,7 @@ const useFormField = () => {
   }
 
   const { id } = itemContext;
+
   return {
     id,
     name: fieldContext.name,
@@ -83,15 +62,41 @@ const useFormField = () => {
   };
 };
 
+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<
-  HTMLLabelElement,
-  React.ComponentPropsWithoutRef<"label">
->(({ children, ...props }, ref) => {
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
+
   return (
-    <StyledFormLabel ref={ref} htmlFor={formItemId} error={!!error} {...props}>
-      {children}
-    </StyledFormLabel>
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
   );
 });
 FormLabel.displayName = "FormLabel";
@@ -102,6 +107,7 @@ const FormControl = React.forwardRef<
 >(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } =
     useFormField();
+
   return (
     <Slot
       ref={ref}
@@ -121,12 +127,16 @@ FormControl.displayName = "FormControl";
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
->(({ children, ...props }, ref) => {
+>(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
+
   return (
-    <StyledFormDescription ref={ref} id={formDescriptionId} {...props}>
-      {children}
-    </StyledFormDescription>
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
   );
 });
 FormDescription.displayName = "FormDescription";
@@ -134,14 +144,23 @@ FormDescription.displayName = "FormDescription";
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
->(({ children, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
-  if (!body) return null;
+
+  if (!body) {
+    return null;
+  }
+
   return (
-    <StyledFormMessage ref={ref} id={formMessageId} {...props}>
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
       {body}
-    </StyledFormMessage>
+    </p>
   );
 });
 FormMessage.displayName = "FormMessage";

package/src/lib/utils.ts

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