@granto-umbrella/umbrella-components 2.1.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -31,7 +31,13 @@
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.2.4",
+    "lucide-react": "^0.488.0",
     "react": "^18.3.1",
+    "react-day-picker": "^9.6.7",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
     "react-select": "^5.10.0"

package/src/components/atoms/Label/Label.styles.ts

@@ -0,0 +1,15 @@
+// Label.styled.tsx
+import styled from "styled-components";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+export const StyledLabel = styled(LabelPrimitive.Root)`
+  font-size: 0.875rem; /* Equivalente a text-sm */
+  font-weight: 500; /* Equivalente a font-medium */
+  line-height: 1; /* Equivalente a leading-none */
+
+  /* Simula o comportamento de desabilitado */
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+`;

package/src/components/atoms/Label/Label.tsx

@@ -0,0 +1,16 @@
+// Label.tsx
+import * as React from "react";
+import { StyledLabel } from "./Label.styles";
+
+export type LabelProps = React.ComponentProps<typeof StyledLabel>;
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <StyledLabel ref={ref} {...props}>
+        {children}
+      </StyledLabel>
+    );
+  }
+);
+Label.displayName = "Label";

package/src/components/molecules/{ButtonGroup.styles.ts → ButtonGroup/ButtonGroup.styles.ts}

@@ -1,4 +1,4 @@
-import { semanticSizes } from "../../styles/tokens";
+import { semanticSizes } from "../../../styles/tokens";
 import styled from "styled-components";
 
 export const ButtonGroupContainer = styled.div<{ $orientation: string }>`

package/src/components/molecules/{ButtonGroup.tsx → ButtonGroup/ButtonGroup.tsx}

@@ -1,6 +1,6 @@
 import React from "react";
 import { ButtonGroupProps } from "./ButtonGroup.types";
-import Button from "../atoms/Button";
+import Button from "../../atoms/Button";
 import { ButtonGroupContainer } from "./ButtonGroup.styles";
 
 const ButtonGroup: React.FC<ButtonGroupProps> = ({

package/src/components/molecules/Calendar/Calendar.styles.ts

@@ -0,0 +1,143 @@
+import styled from "styled-components";
+import { DayPicker as RDPDayPicker } from "react-day-picker";
+
+export const StyledDayPicker = styled(RDPDayPicker)`
+  padding: 0.75rem; /* p-3 */
+
+  /* Estilo para o container dos meses */
+  .rdp-months {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem; /* equivalente a space-y-4 */
+  }
+
+  @media (min-width: 640px) {
+    .rdp-months {
+      flex-direction: row;
+      gap: 0 1rem; /* sm:flex-row com space-x-4 e sm:space-y-0 */
+    }
+  }
+
+  /* Cada mês */
+  .rdp-month {
+    margin-bottom: 1rem;
+  }
+
+  /* Legenda (caption) do mês */
+  .rdp-caption {
+    display: flex;
+    justify-content: center;
+    padding-top: 0.25rem; /* pt-1 */
+    position: relative;
+    align-items: center;
+  }
+
+  .rdp-caption_label {
+    font-size: 0.875rem; /* text-sm */
+    font-weight: 500; /* font-medium */
+  }
+
+  /* Navegação */
+  .rdp-nav {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem; /* space-x-1 */
+    position: relative;
+  }
+
+  .rdp-nav_button {
+    height: 1.75rem; /* h-7 */
+    width: 1.75rem; /* w-7 */
+    background: transparent;
+    padding: 0;
+    opacity: 0.5;
+    /* Pode-se definir aqui estilos de border se desejar imitar o buttonVariants({ variant: "outline" }) */
+    border: 1px solid #d1d5db;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .rdp-nav_button_previous {
+    position: absolute;
+    left: 0.25rem; /* left-1 */
+  }
+
+  .rdp-nav_button_next {
+    position: absolute;
+    right: 0.25rem; /* right-1 */
+  }
+
+  /* Tabela de dias */
+  .rdp-table {
+    width: 100%; /* w-full */
+    border-collapse: collapse;
+    margin-top: 0.25rem; /* espaço vertical */
+  }
+
+  .rdp-head_row {
+    display: flex;
+  }
+
+  .rdp-head_cell {
+    font-size: 0.8rem; /* text-[0.8rem] */
+    color: #6b7280; /* text-muted-foreground */
+    border-radius: 0.375rem; /* rounded-md */
+    width: 2.25rem; /* w-9 */
+    font-weight: 400; /* font-normal */
+  }
+
+  .rdp-row {
+    display: flex;
+    width: 100%;
+    margin-top: 0.5rem; /* mt-2 */
+  }
+
+  .rdp-cell {
+    height: 2.25rem; /* h-9 */
+    width: 2.25rem; /* w-9 */
+    text-align: center;
+    font-size: 0.875rem; /* text-sm */
+    padding: 0;
+    position: relative;
+
+    &:focus-within {
+      z-index: 20;
+    }
+  }
+
+  /* Botão do dia */
+  .rdp-day {
+    height: 2.25rem; /* h-9 */
+    width: 2.25rem; /* w-9 */
+    padding: 0;
+    font-size: 0.875rem;
+    font-weight: 400;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    /* Estilos adicionais podem ser aplicados conforme necessário */
+  }
+
+  .rdp-day_selected {
+    background: #3b82f6; /* bg-primary (substitua conforme seu tema) */
+    color: #ffffff; /* text-primary-foreground */
+  }
+
+  .rdp-day_today {
+    background: #f3f4f6; /* bg-accent */
+    color: #111827; /* text-accent-foreground */
+  }
+
+  .rdp-day_outside {
+    color: #6b7280; /* text-muted-foreground */
+  }
+
+  .rdp-day_disabled {
+    color: #6b7280;
+    opacity: 0.5;
+  }
+`;

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

@@ -0,0 +1,31 @@
+/* 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";
+
+export type CalendarProps = React.ComponentProps<typeof RDPDayPicker>;
+
+function Calendar({ className, ...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
+      }
+      {...props}
+    />
+  );
+}
+
+Calendar.displayName = "Calendar";
+
+export { Calendar };

package/src/components/molecules/Popover/Popover.styles.ts

@@ -0,0 +1,65 @@
+import styled, { keyframes } from "styled-components";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+const animateIn = keyframes`
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+`;
+
+const animateOut = keyframes`
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.95); }
+`;
+
+const slideInFromTop2 = keyframes`
+  from { transform: translateY(-10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+`;
+
+const slideInFromRight2 = keyframes`
+  from { transform: translateX(10px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+`;
+
+const slideInFromLeft2 = keyframes`
+  from { transform: translateX(-10px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+`;
+
+const slideInFromBottom2 = keyframes`
+  from { transform: translateY(10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+`;
+
+export const StyledPopoverContent = styled(PopoverPrimitive.Content)`
+  z-index: 50;
+  width: 18rem;
+  border-radius: 0.375rem;
+  border: 1px solid #e5e7eb;
+  background-color: var(--popover-bg, #fff);
+  padding: 1rem;
+  color: var(--popover-foreground, #000);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  outline: none;
+
+  &[data-state="open"] {
+    animation: ${animateIn} 0.3s ease-out forwards;
+  }
+  &[data-state="closed"] {
+    animation: ${animateOut} 0.3s ease-in forwards;
+  }
+
+  &[data-side="bottom"] {
+    animation: ${slideInFromTop2} 0.3s ease-out forwards;
+  }
+  &[data-side="left"] {
+    animation: ${slideInFromRight2} 0.3s ease-out forwards;
+  }
+  &[data-side="right"] {
+    animation: ${slideInFromLeft2} 0.3s ease-out forwards;
+  }
+  &[data-side="top"] {
+    animation: ${slideInFromBottom2} 0.3s ease-out forwards;
+  }
+`;

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+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>
+>(({ align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <StyledPopoverContent
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

package/src/components/molecules/RadioBoxGroup/RadioBoxGroup.styles.ts

@@ -0,0 +1,51 @@
+import { semanticColors, semanticShadows } from "../../../styles/tokens";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import styled from "styled-components";
+import { Circle } from "lucide-react";
+
+export const StyledRadioGroup = styled(RadioGroupPrimitive.Root)`
+  display: grid;
+  gap: 0.5rem;
+`;
+
+export const StyledRadioGroupItem = styled(RadioGroupPrimitive.Item)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 1rem;
+  height: 1rem;
+  aspect-ratio: 1 / 1;
+  border-radius: 9999px;
+  border: 1px solid ${semanticColors.branding.border.enabled};
+  color: ${semanticColors.branding.surface.enabled};
+  outline: none;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px ${semanticShadows.shadow.none};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+
+export const StyledIndicator = styled(RadioGroupPrimitive.Indicator)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  color: ${semanticColors.branding.surface.enabled};
+`;
+
+export const StyledCircle = styled(Circle)`
+  width: 0.625rem;
+  height: 0.625rem;
+  fill: currentColor;
+  color: currentColor;
+`;

package/src/components/molecules/RadioBoxGroup/RadioBoxGroup.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import {
+  StyledRadioGroup,
+  StyledRadioGroupItem,
+  StyledIndicator,
+  StyledCircle,
+} from "./RadioBoxGroup.styles";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ ...props }, ref) => {
+  return <StyledRadioGroup {...props} ref={ref} />;
+});
+RadioGroup.displayName = "RadioGroup";
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ ...props }, ref) => {
+  return (
+    <StyledRadioGroupItem {...props} ref={ref}>
+      <StyledIndicator>
+        <StyledCircle />
+      </StyledIndicator>
+    </StyledRadioGroupItem>
+  );
+});
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export { RadioGroup, RadioGroupItem };

package/src/components/organisms/Dialog/Dialog.styles.ts

@@ -0,0 +1,106 @@
+// Dialog.styled.tsx
+import styled from "styled-components";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+/* ========================= */
+/* === Overlay Component === */
+/* ========================= */
+export const StyledDialogOverlay = styled(DialogPrimitive.Overlay)`
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.8);
+  /* Você pode definir animações adicionais aqui, caso deseje */
+`;
+
+/* ========================== */
+/* === Content Component  === */
+/* ========================== */
+export const StyledDialogContent = styled(DialogPrimitive.Content)`
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  z-index: 50;
+  display: grid;
+  width: 100%;
+  max-width: 32rem; /* Equivalente a max-w-lg */
+  transform: translate(-50%, -50%);
+  gap: 1rem; /* gap-4 */
+  border: 1px solid #e5e7eb;
+  background-color: #fff; /* bg-background */
+  padding: 1.5rem; /* p-6 */
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-radius: 0.5rem; /* sm:rounded-lg */
+  transition: all 0.2s ease;
+`;
+
+/* ============================ */
+/* === Close Button Component === */
+/* ============================ */
+export const StyledDialogClose = styled(DialogPrimitive.Close)`
+  position: absolute;
+  top: 1rem; /* top-4 */
+  right: 1rem; /* right-4 */
+  background: none;
+  border: none;
+  border-radius: 0.125rem; /* rounded-sm */
+  opacity: 0.7;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #3b82f6; /* focus:ring-2 focus:ring-ring */
+  }
+`;
+
+/* ========================== */
+/* === Header Component  === */
+/* ========================== */
+export const StyledDialogHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem; /* Aproximadamente space-y-1.5 */
+  text-align: center;
+
+  @media (min-width: 640px) {
+    text-align: left;
+  }
+`;
+
+/* ========================== */
+/* === Footer Component  === */
+/* ========================== */
+export const StyledDialogFooter = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+  gap: 0.5rem; /* Aproximadamente sm:space-x-2 */
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+  }
+`;
+
+/* =========================== */
+/* === Title Component  === */
+/* =========================== */
+export const StyledDialogTitle = styled(DialogPrimitive.Title)`
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 600; /* font-semibold */
+  line-height: 1; /* leading-none */
+  letter-spacing: -0.025em; /* tracking-tight */
+`;
+
+/* =============================== */
+/* === Description Component  === */
+/* =============================== */
+export const StyledDialogDescription = styled(DialogPrimitive.Description)`
+  font-size: 0.875rem; /* text-sm */
+  color: #6b7280; /* text-muted-foreground */
+`;

package/src/components/organisms/Dialog/Dialog.tsx

@@ -0,0 +1,69 @@
+// Dialog.tsx
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import {
+  StyledDialogOverlay,
+  StyledDialogContent,
+  StyledDialogClose,
+  StyledDialogHeader,
+  StyledDialogFooter,
+  StyledDialogTitle,
+  StyledDialogDescription,
+} from "./Dialog.styles";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ children, ...props }, ref) => (
+  <DialogPortal>
+    <StyledDialogOverlay />
+    <StyledDialogContent ref={ref} {...props}>
+      {children}
+      <StyledDialogClose>
+        <X style={{ height: "1rem", width: "1rem" }} />
+        <span className="sr-only">Close</span>
+      </StyledDialogClose>
+    </StyledDialogContent>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = (
+  props
+) => <StyledDialogHeader {...props} />;
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = (
+  props
+) => <StyledDialogFooter {...props} />;
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>((props, ref) => <StyledDialogTitle ref={ref} {...props} />);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>((props, ref) => <StyledDialogDescription ref={ref} {...props} />);
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogContent,
+  StyledDialogOverlay as DialogOverlay,
+  StyledDialogClose as DialogClose,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

package/src/components/organisms/Form/Form.styles.ts

@@ -0,0 +1,35 @@
+// Form.styled.tsx
+import styled from "styled-components";
+
+/* Container para cada item do formulário */
+export const StyledFormItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem; /* Aproximadamente o "space-y-2" do Tailwind */
+`;
+
+/* Estilo para o label do formulário; a propriedade "error" permite alterar a cor se necessário */
+export const StyledFormLabel = styled.label<{ error?: boolean }>`
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 500; /* font-medium */
+  line-height: 1; /* leading-none */
+  color: ${(props) => (props.error ? "#dc2626" : "inherit")};
+`;
+
+/* Estilo para o container de controle de formulário (por exemplo, input) */
+export const StyledFormControl = styled.div`
+  /* Adicione aqui quaisquer estilos específicos para o container do input, se necessário */
+`;
+
+/* Estilo para a descrição do formulário */
+export const StyledFormDescription = styled.p`
+  font-size: 0.875rem; /* text-sm */
+  color: #6b7280; /* text-muted-foreground */
+`;
+
+/* Estilo para a mensagem (geralmente de erro) */
+export const StyledFormMessage = styled.p`
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 500; /* font-medium */
+  color: #dc2626; /* text-destructive */
+`;

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

@@ -0,0 +1,158 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+import {
+  StyledFormItem,
+  StyledFormLabel,
+  StyledFormDescription,
+  StyledFormMessage,
+} from "./Form.styles";
+
+/* Reexporta o FormProvider como Form para facilitar o uso */
+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>
+  );
+};
+
+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);
+  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,
+  };
+};
+
+const FormLabel = React.forwardRef<
+  HTMLLabelElement,
+  React.ComponentPropsWithoutRef<"label">
+>(({ children, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return (
+    <StyledFormLabel ref={ref} htmlFor={formItemId} error={!!error} {...props}>
+      {children}
+    </StyledFormLabel>
+  );
+});
+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>
+>(({ children, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return (
+    <StyledFormDescription ref={ref} id={formDescriptionId} {...props}>
+      {children}
+    </StyledFormDescription>
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) return null;
+  return (
+    <StyledFormMessage ref={ref} id={formMessageId} {...props}>
+      {body}
+    </StyledFormMessage>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

package/src/index.ts

@@ -1,44 +1,106 @@
 /* eslint-disable react-refresh/only-export-components */
 // Import all components
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "@radix-ui/react-dialog";
+import { Form } from "react-hook-form";
+import Badge from "./components/atoms/Badge/Badge";
+import Breadcrumb from "./components/atoms/Breadcrumb/Breadcrumb";
 import Button from "./components/atoms/Button";
+import { Checkbox } from "./components/atoms/Checkbox/Checkbox";
 import Icon from "./components/atoms/Icon";
 import Input from "./components/atoms/Input";
-import Select from "./components/atoms/Select";
-import AlertDialog from "./components/organisms/AlertDialog/AlertDialog";
-import Badge from "./components/atoms/Badge/Badge";
-import Breadcrumb from "./components/atoms/Breadcrumb/Breadcrumb";
+import { Label } from "./components/atoms/Label/Label";
 import RadioButton from "./components/atoms/RadioButton/RadioButton";
-import { Checkbox } from "./components/atoms/Checkbox/Checkbox";
+import Select from "./components/atoms/Select";
 import Switch from "./components/atoms/Switch/Switch";
 import Text from "./components/atoms/Text";
 import Textarea from "./components/atoms/Textarea/Textarea";
-import ButtonGroup from "./components/molecules/ButtonGroup";
+import ButtonGroup from "./components/molecules/ButtonGroup/ButtonGroup";
+import { Calendar } from "./components/molecules/Calendar/Calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./components/molecules/Popover/Popover";
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "./components/molecules/RadioBoxGroup/RadioBoxGroup";
+import AlertDialog from "./components/organisms/AlertDialog/AlertDialog";
+import {
+  DialogFooter,
+  DialogHeader,
+} from "./components/organisms/Dialog/Dialog";
+import {
+  StyledDialogClose,
+  StyledDialogOverlay,
+} from "./components/organisms/Dialog/Dialog.styles";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+} from "./components/organisms/Form/Form";
 
 // Export all components
 export {
-  Button,
-  Icon,
-  Input,
-  Select,
   AlertDialog,
   Badge,
   Breadcrumb,
-  RadioButton,
+  Button,
+  ButtonGroup,
+  Calendar,
   Checkbox,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Icon,
+  Input,
+  Label,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  RadioButton,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  StyledDialogClose,
+  StyledDialogOverlay,
   Switch,
   Text,
   Textarea,
-  ButtonGroup,
+  useFormField,
 };
 
 // Export all tokens from a new file
-export { primitiveColors, semanticColors } from "./styles/tokens/colors";
 export { primitiveBorders, semanticBorders } from "./styles/tokens/borders";
+export { primitiveColors, semanticColors } from "./styles/tokens/colors";
+export { primitiveRadius, semanticRadius } from "./styles/tokens/radius";
 export { primitiveShadows, semanticShadows } from "./styles/tokens/shadows";
 export { primitiveSizes, semanticSizes } from "./styles/tokens/sizes";
-export { primitiveRadius, semanticRadius } from "./styles/tokens/radius";
 export { typographyTokens } from "./styles/tokens/typography";
 
 // Export all types
-export type { Shadows } from "./types/shadows.types";
 export type { Radius } from "./types/radius.types";
+export type { Shadows } from "./types/shadows.types";