@granto-umbrella/umbrella-components 2.2.8 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.2.8",
+  "version": "2.3.0",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

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

@@ -1,63 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import { DayPicker as RDPDayPicker } from "react-day-picker";
+import { StyledDayPicker } from "./Calendar.styles";
 
-import { cn } from "@/lib/utils";
+export type CalendarProps = React.ComponentProps<typeof RDPDayPicker>;
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
+function Calendar({ className, ...props }: CalendarProps) {
   return (
-    <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} />
-        ),
-      }}
+    <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
+      }
       {...props}
     />
   );
 }
+
 Calendar.displayName = "Calendar";
 
 export { Calendar };

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

@@ -1,25 +1,19 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-import { cn } from "../../../lib/utils";
+import { StyledPopoverContent } from "./Popover.styles";
 
 const Popover = PopoverPrimitive.Root;
-
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ align = "center", sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
+    <StyledPopoverContent
       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/molecules/TabToggle/TabToggle.styles.ts

@@ -0,0 +1,54 @@
+import {
+  semanticColors,
+  semanticRadius,
+  semanticSizes,
+  typographyTokens,
+} from "../../../styles/tokens";
+import styled from "styled-components";
+
+export const ToggleContainer = styled.div`
+  position: relative;
+  display: inline-flex;
+  background: transparent;
+  border-radius: ${semanticRadius.global.radius.md2};
+  padding: ${semanticSizes.global.padding.xs};
+  white-space: nowrap;
+`;
+
+export const Slider = styled.div<{
+  activeIndex: number;
+  count: number;
+}>`
+  position: absolute;
+  top: ${semanticSizes.global.padding.xs};
+  left: ${({ activeIndex, count }) => (activeIndex * 100) / count}%;
+  width: ${({ count }) => 100 / count}%;
+  height: calc(100% - ${semanticSizes.global.padding.xs} * 2);
+  background: ${semanticColors.base.background};
+  border-radius: ${semanticRadius.global.radius.md2};
+  transition: left 200ms ease-in-out;
+  z-index: 0;
+`;
+
+export const TabButton = styled.button<{ active: boolean }>`
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 230px;
+  justify-content: center;
+  align-items: center;
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
+  font-size: ${typographyTokens.fontSizes.bodyS};
+  color: ${({ active }) =>
+    active ? semanticColors.base.text : semanticColors.neutral[400]};
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 200ms;
+
+  white-space: nowrap;
+
+  &:focus {
+    outline: none;
+  }
+`;

package/src/components/molecules/TabToggle/TabToggle.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import { ToggleContainer, Slider, TabButton } from "./TabToggle.styles";
+
+export type TabItem = {
+  title: string;
+  quantity: number;
+};
+
+export type TabToggleProps = {
+  items: TabItem[];
+};
+
+export const TabToggle: React.FC<TabToggleProps> = ({ items }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const count = items.length;
+
+  return (
+    <ToggleContainer>
+      {/* Slider agora sabe quantas abas existem */}
+      <Slider activeIndex={activeIndex} count={count} />
+
+      {items.map(({ title, quantity }, i) => (
+        <TabButton
+          key={title}
+          active={i === activeIndex}
+          onClick={() => setActiveIndex(i)}
+        >
+          {title} ({quantity})
+        </TabButton>
+      ))}
+    </ToggleContainer>
+  );
+};
+
+export default TabToggle;

package/src/components/organisms/CalendarPopover/CalendarPopover.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { format } from "date-fns";
+import { Calendar, CalendarIcon } from "lucide-react";
+
+import { cn } from "../../../lib/utils";
+import { FormControl } from "../Form/Form";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../molecules/Popover/Popover";
+import Button from "../../atoms/Button/Button";
+
+export type DatePickerFieldProps = {
+  formField: {
+    value: Date | null;
+    onChange: (date: Date | null) => void;
+  };
+};
+
+const DatePickerField: React.FC<DatePickerFieldProps> = ({ formField }) => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <FormControl>
+          <Button
+            variant="outline"
+            className={cn(
+              "w-[240px] pl-3 text-left font-normal",
+              !formField.value && "text-muted-foreground"
+            )}
+          >
+            {formField.value ? (
+              format(formField.value, "PPP")
+            ) : (
+              <span>CALENDÁRIO</span>
+            )}
+            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+          </Button>
+        </FormControl>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={formField.value}
+          onSelect={formField.onChange}
+          disabled={(date) =>
+            date > new Date() || date < new Date("1900-01-01")
+          }
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default DatePickerField;

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

@@ -1,5 +1,6 @@
+/* eslint-disable react-refresh/only-export-components */
+// Form.tsx
 import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
@@ -9,10 +10,14 @@ import {
   FormProvider,
   useFormContext,
 } from "react-hook-form";
+import {
+  StyledFormItem,
+  StyledFormLabel,
+  StyledFormDescription,
+  StyledFormMessage,
+} from "./Form.styles";
 
-import { cn } from "../../../lib/utils";
-import { Label } from "../../atoms/Label/Label";
-
+/* Reexporta o FormProvider como Form para facilitar o uso */
 const Form = FormProvider;
 
 type FormFieldContextValue<
@@ -39,6 +44,25 @@ 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);
@@ -51,7 +75,6 @@ const useFormField = () => {
   }
 
   const { id } = itemContext;
-
   return {
     id,
     name: fieldContext.name,
@@ -62,41 +85,15 @@ 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<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
+  HTMLLabelElement,
+  React.ComponentPropsWithoutRef<"label">
+>(({ children, ...props }, ref) => {
   const { error, formItemId } = useFormField();
-
   return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
+    <StyledFormLabel ref={ref} htmlFor={formItemId} error={!!error} {...props}>
+      {children}
+    </StyledFormLabel>
   );
 });
 FormLabel.displayName = "FormLabel";
@@ -107,7 +104,6 @@ const FormControl = React.forwardRef<
 >(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } =
     useFormField();
-
   return (
     <Slot
       ref={ref}
@@ -127,16 +123,12 @@ FormControl.displayName = "FormControl";
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
+>(({ children, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-
   return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
+    <StyledFormDescription ref={ref} id={formDescriptionId} {...props}>
+      {children}
+    </StyledFormDescription>
   );
 });
 FormDescription.displayName = "FormDescription";
@@ -144,23 +136,14 @@ FormDescription.displayName = "FormDescription";
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
+>(({ children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
-
-  if (!body) {
-    return null;
-  }
-
+  if (!body) return null;
   return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
-      {...props}
-    >
+    <StyledFormMessage ref={ref} id={formMessageId} {...props}>
       {body}
-    </p>
+    </StyledFormMessage>
   );
 });
 FormMessage.displayName = "FormMessage";

package/src/styles/tokens/radius.ts

@@ -3,6 +3,7 @@ export const primitiveRadius = {
     half: "0.0625rem", // 1px
     x1: "0.125rem", // 2px
     x2: "0.25rem", // 4px
+    x3: "0.5rem", // 8px
     x4: "1rem", // 16px
     x1000: "62.4375rem", // 9999px (Full radius, para bordas arredondadas completas)
   },
@@ -13,6 +14,7 @@ export const semanticRadius = {
     radius: {
       sm: primitiveRadius.radius.x1, // 2px
       md: primitiveRadius.radius.x2, // 4px
+      md2: primitiveRadius.radius.x3, // 8px
       lg: primitiveRadius.radius.x4, // 16px
       full: primitiveRadius.radius.x1000, // 9999px para bordas completamente arredondadas
     },