From b0e4d841b6d9a1a2ec0fc54a92e2c76650eaf476 Mon Sep 17 00:00:00 2001
From: Aditya <2005akjha@gmail.com>
Date: Fri, 17 Oct 2025 16:57:19 +0530
Subject: [PATCH 1/2] ref(ui): migrate components to React 19 ref-as-prop
 (remove forwardRef, displayName); update all elements

---
 packages/ui/src/elements/accordion.tsx       |  33 +++---
 packages/ui/src/elements/alert.tsx           |  27 ++---
 packages/ui/src/elements/avatar.tsx          |  43 ++++----
 packages/ui/src/elements/breadcrumb.tsx      |  70 +++++-------
 packages/ui/src/elements/button.tsx          |  12 +--
 packages/ui/src/elements/card.tsx            |  40 +++----
 packages/ui/src/elements/chart.tsx           |  92 +++++++---------
 packages/ui/src/elements/checkbox.tsx        |  41 ++++---
 packages/ui/src/elements/command.tsx         |  88 +++++++--------
 packages/ui/src/elements/dialog.tsx          |  50 ++++-----
 packages/ui/src/elements/dropdown-menu.tsx   |  96 ++++++++---------
 packages/ui/src/elements/input.tsx           |  98 +++++++++--------
 packages/ui/src/elements/label.tsx           |  10 +-
 packages/ui/src/elements/navigation-menu.tsx |  72 ++++++-------
 packages/ui/src/elements/pagination.tsx      |  14 ++-
 packages/ui/src/elements/popover.tsx         |  11 +-
 packages/ui/src/elements/progress.tsx        |  46 ++++----
 packages/ui/src/elements/radio-group.tsx     |  33 +++---
 packages/ui/src/elements/select.tsx          | 108 ++++++++-----------
 packages/ui/src/elements/separator.tsx       |  11 +-
 packages/ui/src/elements/sheet.tsx           |  61 +++++------
 packages/ui/src/elements/switch.tsx          |  11 +-
 packages/ui/src/elements/table.tsx           |  80 ++++++--------
 packages/ui/src/elements/textarea.tsx        |  60 +++++------
 packages/ui/src/elements/toast.tsx           |  65 +++++------
 packages/ui/src/elements/toggle-group.tsx    |  22 ++--
 packages/ui/src/elements/toggle.tsx          |  11 +-
 packages/ui/src/elements/tooltip.tsx         |  11 +-
 packages/ui/src/elements/typography.tsx      |  12 +--
 29 files changed, 579 insertions(+), 749 deletions(-)

diff --git a/packages/ui/src/elements/accordion.tsx b/packages/ui/src/elements/accordion.tsx
index d06dfdf7..163ca829 100644
--- a/packages/ui/src/elements/accordion.tsx
+++ b/packages/ui/src/elements/accordion.tsx
@@ -7,20 +7,21 @@ import { cn } from '@o2s/ui/lib/utils';
 
 const Accordion = AccordionPrimitive.Root;
 
-const AccordionItem = React.forwardRef<
-    React.ElementRef<typeof AccordionPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
+type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & {
+    ref?: React.Ref<React.ElementRef<typeof AccordionPrimitive.Item>>;
+};
+const AccordionItem = ({ className, ref, ...props }: AccordionItemProps) => (
     <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
-));
-AccordionItem.displayName = 'AccordionItem';
+);
 
 export interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
     tag?: keyof JSX.IntrinsicElements;
 }
 
-const AccordionTrigger = React.forwardRef<React.ElementRef<typeof AccordionPrimitive.Trigger>, AccordionTriggerProps>(
-    ({ className, tag = 'h3', children, ...props }, ref) => {
+type AccordionTriggerOwnProps = AccordionTriggerProps & {
+    ref?: React.Ref<React.ElementRef<typeof AccordionPrimitive.Trigger>>;
+};
+const AccordionTrigger = ({ className, tag = 'h3', children, ref, ...props }: AccordionTriggerOwnProps) => {
         const Comp = tag;
 
         return (
@@ -40,14 +41,12 @@ const AccordionTrigger = React.forwardRef<React.ElementRef<typeof AccordionPrimi
                 </Comp>
             </AccordionPrimitive.Header>
         );
-    },
-);
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+    };
 
-const AccordionContent = React.forwardRef<
-    React.ElementRef<typeof AccordionPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof AccordionPrimitive.Content>>;
+};
+const AccordionContent = ({ className, children, ref, ...props }: AccordionContentProps) => (
     <AccordionPrimitive.Content
         ref={ref}
         className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
@@ -55,8 +54,6 @@ const AccordionContent = React.forwardRef<
     >
         <div className={cn('pb-4 pt-0', className)}>{children}</div>
     </AccordionPrimitive.Content>
-));
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+);
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/packages/ui/src/elements/alert.tsx b/packages/ui/src/elements/alert.tsx
index ba01f67a..4b470cc7 100644
--- a/packages/ui/src/elements/alert.tsx
+++ b/packages/ui/src/elements/alert.tsx
@@ -18,26 +18,21 @@ const alertVariants = cva(
     },
 );
 
-const Alert = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
+type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+const Alert = ({ className, variant, ref, ...props }: AlertProps) => (
     <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-));
-Alert.displayName = 'Alert';
+);
 
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-    ({ className, ...props }, ref) => (
-        <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
-    ),
+type AlertTitleProps = React.HTMLAttributes<HTMLHeadingElement> & { ref?: React.Ref<HTMLHeadingElement> };
+const AlertTitle = ({ className, ref, ...props }: AlertTitleProps) => (
+    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
 );
-AlertTitle.displayName = 'AlertTitle';
 
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
-    ),
+type AlertDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & { ref?: React.Ref<HTMLDivElement> };
+const AlertDescription = ({ className, ref, ...props }: AlertDescriptionProps) => (
+    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
 );
-AlertDescription.displayName = 'AlertDescription';
 
 export { Alert, AlertTitle, AlertDescription };
diff --git a/packages/ui/src/elements/avatar.tsx b/packages/ui/src/elements/avatar.tsx
index 7ce8881b..96492a9f 100644
--- a/packages/ui/src/elements/avatar.tsx
+++ b/packages/ui/src/elements/avatar.tsx
@@ -23,27 +23,24 @@ type AvatarProps = {
     email?: string;
 } & React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>;
 
-const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
-    ({ name, email, className, ...props }, ref) => (
-        <div className="flex items-center gap-2">
-            <AvatarPrimitive.Root
-                ref={ref}
-                className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-                {...props}
-            />
-            {name && <AvatarUser name={name} email={email} />}
-        </div>
-    ),
+type AvatarOwnProps = AvatarProps & { ref?: React.Ref<React.ElementRef<typeof AvatarPrimitive.Root>> };
+const Avatar = ({ name, email, className, ref, ...props }: AvatarOwnProps) => (
+    <div className="flex items-center gap-2">
+        <AvatarPrimitive.Root
+            ref={ref}
+            className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+            {...props}
+        />
+        {name && <AvatarUser name={name} email={email} />}
+    </div>
 );
-Avatar.displayName = AvatarPrimitive.Root.displayName;
 
-const AvatarImage = React.forwardRef<
-    React.ElementRef<typeof AvatarPrimitive.Image>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, alt = '', ...props }, ref) => (
+type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
+    ref?: React.Ref<React.ElementRef<typeof AvatarPrimitive.Image>>;
+};
+const AvatarImage = ({ className, alt = '', ref, ...props }: AvatarImageProps) => (
     <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} alt={alt} {...props} />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+);
 
 export interface AvatarFallbackProps
     extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>,
@@ -51,8 +48,10 @@ export interface AvatarFallbackProps
     name: string;
 }
 
-const AvatarFallback = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Fallback>, AvatarFallbackProps>(
-    ({ variant, className, name, ...props }, ref) => {
+type AvatarFallbackOwnProps = AvatarFallbackProps & {
+    ref?: React.Ref<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
+};
+const AvatarFallback = ({ variant, className, name, ref, ...props }: AvatarFallbackOwnProps) => {
         const initials = name
             .split(' ')
             .map((name) => name[0])
@@ -64,9 +63,7 @@ const AvatarFallback = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.
                 {initials}
             </AvatarPrimitive.Fallback>
         );
-    },
-);
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+};
 
 type AvatarUserProps = {
     name: string;
diff --git a/packages/ui/src/elements/breadcrumb.tsx b/packages/ui/src/elements/breadcrumb.tsx
index 7d6d4a31..3426b1ac 100644
--- a/packages/ui/src/elements/breadcrumb.tsx
+++ b/packages/ui/src/elements/breadcrumb.tsx
@@ -4,60 +4,40 @@ import * as React from 'react';
 
 import { cn } from '@o2s/ui/lib/utils';
 
-const Breadcrumb = React.forwardRef<
-    HTMLElement,
-    React.ComponentPropsWithoutRef<'nav'> & {
-        separator?: React.ReactNode;
-    }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = 'Breadcrumb';
+type BreadcrumbProps = React.ComponentPropsWithoutRef<'nav'> & { separator?: React.ReactNode; ref?: React.Ref<HTMLElement> };
+const Breadcrumb = ({ ref, ...props }: BreadcrumbProps) => <nav ref={ref} aria-label="breadcrumb" {...props} />;
 
-const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
-    ({ className, ...props }, ref) => (
-        <ol
-            ref={ref}
-            className={cn(
-                'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
-                className,
-            )}
-            {...props}
-        />
-    ),
+type BreadcrumbListProps = React.ComponentPropsWithoutRef<'ol'> & { ref?: React.Ref<HTMLOListElement> };
+const BreadcrumbList = ({ className, ref, ...props }: BreadcrumbListProps) => (
+    <ol
+        ref={ref}
+        className={cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', className)}
+        {...props}
+    />
 );
-BreadcrumbList.displayName = 'BreadcrumbList';
 
-const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
-    ({ className, ...props }, ref) => (
-        <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
-    ),
+type BreadcrumbItemProps = React.ComponentPropsWithoutRef<'li'> & { ref?: React.Ref<HTMLLIElement> };
+const BreadcrumbItem = ({ className, ref, ...props }: BreadcrumbItemProps) => (
+    <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
 );
-BreadcrumbItem.displayName = 'BreadcrumbItem';
 
-const BreadcrumbLink = React.forwardRef<
-    HTMLAnchorElement,
-    React.ComponentPropsWithoutRef<'a'> & {
-        asChild?: boolean;
-    }
->(({ asChild, className, ...props }, ref) => {
+type BreadcrumbLinkProps = React.ComponentPropsWithoutRef<'a'> & { asChild?: boolean; ref?: React.Ref<HTMLAnchorElement> };
+const BreadcrumbLink = ({ asChild, className, ref, ...props }: BreadcrumbLinkProps) => {
     const Comp = asChild ? Slot : 'a';
-
     return <Comp ref={ref} className={cn('transition-colors hover:text-foreground', className)} {...props} />;
-});
-BreadcrumbLink.displayName = 'BreadcrumbLink';
+};
 
-const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
-    ({ className, ...props }, ref) => (
-        <span
-            ref={ref}
-            role="link"
-            aria-disabled="true"
-            aria-current="page"
-            className={cn('font-normal text-foreground', className)}
-            {...props}
-        />
-    ),
+type BreadcrumbPageProps = React.ComponentPropsWithoutRef<'span'> & { ref?: React.Ref<HTMLSpanElement> };
+const BreadcrumbPage = ({ className, ref, ...props }: BreadcrumbPageProps) => (
+    <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn('font-normal text-foreground', className)}
+        {...props}
+    />
 );
-BreadcrumbPage.displayName = 'BreadcrumbPage';
 
 const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (
     <li role="presentation" aria-hidden="true" className={cn('[&>svg]:w-3.5 [&>svg]:h-3.5', className)} {...props}>
diff --git a/packages/ui/src/elements/button.tsx b/packages/ui/src/elements/button.tsx
index 5278b692..77f08b6e 100644
--- a/packages/ui/src/elements/button.tsx
+++ b/packages/ui/src/elements/button.tsx
@@ -8,14 +8,12 @@ import { baseVariant } from '@o2s/ui/lib/utils';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof baseVariant> {
     asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant = 'primary', size = 'default', asChild = false, ...props }, ref) => {
-        const Comp = asChild ? Slot : 'button';
-        return <Comp className={cn(baseVariant({ variant, size }), buttonVariants, className)} ref={ref} {...props} />;
-    },
-);
-Button.displayName = 'Button';
+const Button = ({ className, variant = 'primary', size = 'default', asChild = false, ref, ...props }: ButtonProps) => {
+    const Comp = asChild ? Slot : 'button';
+    return <Comp className={cn(baseVariant({ variant, size }), buttonVariants, className)} ref={ref} {...props} />;
+};
 
 export { Button, buttonVariants };
diff --git a/packages/ui/src/elements/card.tsx b/packages/ui/src/elements/card.tsx
index 24227a5c..620eac38 100644
--- a/packages/ui/src/elements/card.tsx
+++ b/packages/ui/src/elements/card.tsx
@@ -2,42 +2,28 @@ import * as React from 'react';
 
 import { cn } from '@o2s/ui/lib/utils';
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+type CardProps = React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> };
+const Card = ({ className, ref, ...props }: CardProps) => (
     <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-xs', className)} {...props} />
-));
-Card.displayName = 'Card';
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6 pb-0', className)} {...props} />
-    ),
 );
-CardHeader.displayName = 'CardHeader';
 
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
-    ),
+type CardSectionProps = React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> };
+const CardHeader = ({ className, ref, ...props }: CardSectionProps) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6 pb-0', className)} {...props} />
 );
-CardTitle.displayName = 'CardTitle';
 
-const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-    ),
+const CardTitle = ({ className, ref, ...props }: CardSectionProps) => (
+    <div ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
 );
-CardDescription.displayName = 'CardDescription';
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6', className)} {...props} />,
+const CardDescription = ({ className, ref, ...props }: CardSectionProps) => (
+    <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
 );
-CardContent.displayName = 'CardContent';
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-    ),
+const CardContent = ({ className, ref, ...props }: CardSectionProps) => <div ref={ref} className={cn('p-6', className)} {...props} />;
+
+const CardFooter = ({ className, ref, ...props }: CardSectionProps) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
 );
-CardFooter.displayName = 'CardFooter';
 
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/packages/ui/src/elements/chart.tsx b/packages/ui/src/elements/chart.tsx
index b955cfc6..97fc5957 100644
--- a/packages/ui/src/elements/chart.tsx
+++ b/packages/ui/src/elements/chart.tsx
@@ -32,13 +32,12 @@ function useChart() {
     return context;
 }
 
-const ChartContainer = React.forwardRef<
-    HTMLDivElement,
-    React.ComponentProps<'div'> & {
-        config: ChartConfig;
-        children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
-    }
->(({ id, className, children, config, ...props }, ref) => {
+type ChartContainerProps = React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+    ref?: React.Ref<HTMLDivElement>;
+};
+const ChartContainer = ({ id, className, children, config, ref, ...props }: ChartContainerProps) => {
     const uniqueId = React.useId();
     const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
 
@@ -58,8 +57,7 @@ const ChartContainer = React.forwardRef<
             </div>
         </ChartContext.Provider>
     );
-});
-ChartContainer.displayName = 'Chart';
+};
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
     const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
@@ -92,35 +90,31 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
-const ChartTooltipContent = React.forwardRef<
-    HTMLDivElement,
-    React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-        React.ComponentProps<'div'> & {
-            hideLabel?: boolean;
-            hideIndicator?: boolean;
-            indicator?: 'line' | 'dot' | 'dashed';
-            nameKey?: string;
-            labelKey?: string;
-        }
->(
-    (
-        {
-            active,
-            payload,
-            className,
-            indicator = 'dot',
-            hideLabel = false,
-            hideIndicator = false,
-            label,
-            labelFormatter,
-            labelClassName,
-            formatter,
-            color,
-            nameKey,
-            labelKey,
-        },
-        ref,
-    ) => {
+type ChartTooltipContentProps = React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<'div'> & {
+        hideLabel?: boolean;
+        hideIndicator?: boolean;
+        indicator?: 'line' | 'dot' | 'dashed';
+        nameKey?: string;
+        labelKey?: string;
+        ref?: React.Ref<HTMLDivElement>;
+    };
+const ChartTooltipContent = ({
+    active,
+    payload,
+    className,
+    indicator = 'dot',
+    hideLabel = false,
+    hideIndicator = false,
+    label,
+    labelFormatter,
+    labelClassName,
+    formatter,
+    color,
+    nameKey,
+    labelKey,
+    ref,
+}: ChartTooltipContentProps) => {
         const { config } = useChart();
 
         const tooltipLabel = React.useMemo(() => {
@@ -230,20 +224,17 @@ const ChartTooltipContent = React.forwardRef<
                 </div>
             </div>
         );
-    },
-);
-ChartTooltipContent.displayName = 'ChartTooltip';
+    };
 
 const ChartLegend = RechartsPrimitive.Legend;
 
-const ChartLegendContent = React.forwardRef<
-    HTMLDivElement,
-    React.ComponentProps<'div'> &
-        Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
-            hideIcon?: boolean;
-            nameKey?: string;
-        }
->(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
+type ChartLegendContentProps = React.ComponentProps<'div'> &
+    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+        hideIcon?: boolean;
+        nameKey?: string;
+        ref?: React.Ref<HTMLDivElement>;
+    };
+const ChartLegendContent = ({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey, ref }: ChartLegendContentProps) => {
     const { config } = useChart();
 
     if (!payload?.length) {
@@ -286,8 +277,7 @@ const ChartLegendContent = React.forwardRef<
             })}
         </div>
     );
-});
-ChartLegendContent.displayName = 'ChartLegend';
+};
 
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
diff --git a/packages/ui/src/elements/checkbox.tsx b/packages/ui/src/elements/checkbox.tsx
index 6786d959..ffc9997c 100644
--- a/packages/ui/src/elements/checkbox.tsx
+++ b/packages/ui/src/elements/checkbox.tsx
@@ -6,10 +6,10 @@ import { cn } from '@o2s/ui/lib/utils';
 
 import { Label } from '@o2s/ui/elements/label';
 
-const Checkbox = React.forwardRef<
-    React.ElementRef<typeof CheckboxPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof CheckboxPrimitive.Root>>;
+};
+const Checkbox = ({ className, ref, ...props }: CheckboxProps) => (
     <CheckboxPrimitive.Root
         ref={ref}
         className={cn(
@@ -22,29 +22,28 @@ const Checkbox = React.forwardRef<
             <Check className="h-4 w-4" />
         </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+);
 
 export interface CheckboxWithLabelProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
     label: string | React.ReactNode;
     labelClassName?: string;
 }
 
-const CheckboxWithLabel = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxWithLabelProps>(
-    ({ className, label, labelClassName, id, ...props }, ref) => {
-        const generatedId = React.useId();
-        const checkboxId = id || generatedId;
+type CheckboxWithLabelOwnProps = CheckboxWithLabelProps & {
+    ref?: React.Ref<React.ElementRef<typeof CheckboxPrimitive.Root>>;
+};
+const CheckboxWithLabel = ({ className, label, labelClassName, id, ref, ...props }: CheckboxWithLabelOwnProps) => {
+    const generatedId = React.useId();
+    const checkboxId = id || generatedId;
 
-        return (
-            <div className="flex items-start space-x-2">
-                <Checkbox id={checkboxId} ref={ref} {...props} className={className} />
-                <Label htmlFor={checkboxId} className={cn('mt-[1px]', labelClassName)}>
-                    {label}
-                </Label>
-            </div>
-        );
-    },
-);
-CheckboxWithLabel.displayName = 'CheckboxWithLabel';
+    return (
+        <div className="flex items-start space-x-2">
+            <Checkbox id={checkboxId} ref={ref} {...props} className={className} />
+            <Label htmlFor={checkboxId} className={cn('mt-[1px]', labelClassName)}>
+                {label}
+            </Label>
+        </div>
+    );
+};
 
 export { Checkbox, Label, CheckboxWithLabel };
diff --git a/packages/ui/src/elements/command.tsx b/packages/ui/src/elements/command.tsx
index dc43fa96..b8f41684 100644
--- a/packages/ui/src/elements/command.tsx
+++ b/packages/ui/src/elements/command.tsx
@@ -7,10 +7,10 @@ import { cn } from '@o2s/ui/lib/utils';
 
 import { Dialog, DialogContent } from '@o2s/ui/elements/dialog';
 
-const Command = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
+type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive>>;
+};
+const Command = ({ className, ref, ...props }: CommandProps) => (
     <CommandPrimitive
         ref={ref}
         className={cn(
@@ -19,8 +19,7 @@ const Command = React.forwardRef<
         )}
         {...props}
     />
-));
-Command.displayName = CommandPrimitive.displayName;
+);
 
 const CommandDialog = ({ children, ...props }: DialogProps) => {
     return (
@@ -34,10 +33,10 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
     );
 };
 
-const CommandInput = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Input>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
+type CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.Input>>;
+};
+const CommandInput = ({ className, ref, ...props }: CommandInputProps) => (
     <div className="flex items-center px-3" data-cmdk-input-wrapper="">
         <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
         <CommandPrimitive.Input
@@ -49,34 +48,26 @@ const CommandInput = React.forwardRef<
             {...props}
         />
     </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.List>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-    <CommandPrimitive.List
-        ref={ref}
-        className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
-        {...props}
-    />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
+);
 
-const CommandEmpty = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Empty>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
+type CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.List>>;
+};
+const CommandList = ({ className, ref, ...props }: CommandListProps) => (
+    <CommandPrimitive.List ref={ref} className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)} {...props} />
+);
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+type CommandEmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.Empty>>;
+};
+const CommandEmpty = ({ ref, ...props }: CommandEmptyProps) => (
+    <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+);
 
-const CommandGroup = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Group>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
+type CommandGroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.Group>>;
+};
+const CommandGroup = ({ className, ref, ...props }: CommandGroupProps) => (
     <CommandPrimitive.Group
         ref={ref}
         className={cn(
@@ -85,22 +76,19 @@ const CommandGroup = React.forwardRef<
         )}
         {...props}
     />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
+);
 
-const CommandSeparator = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
+type CommandSeparatorProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.Separator>>;
+};
+const CommandSeparator = ({ className, ref, ...props }: CommandSeparatorProps) => (
     <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+);
 
-const CommandItem = React.forwardRef<
-    React.ElementRef<typeof CommandPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
+type CommandItemProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
+    ref?: React.Ref<React.ElementRef<typeof CommandPrimitive.Item>>;
+};
+const CommandItem = ({ className, ref, ...props }: CommandItemProps) => (
     <CommandPrimitive.Item
         ref={ref}
         className={cn(
@@ -109,9 +97,7 @@ const CommandItem = React.forwardRef<
         )}
         {...props}
     />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
+);
 
 const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
     return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;
diff --git a/packages/ui/src/elements/dialog.tsx b/packages/ui/src/elements/dialog.tsx
index 1e011623..778bab48 100644
--- a/packages/ui/src/elements/dialog.tsx
+++ b/packages/ui/src/elements/dialog.tsx
@@ -14,10 +14,10 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+type DialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    ref?: React.Ref<React.ElementRef<typeof DialogPrimitive.Overlay>>;
+};
+const DialogOverlay = ({ className, ref, ...props }: DialogOverlayProps) => (
     <DialogPrimitive.Overlay
         ref={ref}
         className={cn(
@@ -26,13 +26,12 @@ const DialogOverlay = React.forwardRef<
         )}
         {...props}
     />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+);
 
-const DialogContent = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof DialogPrimitive.Content>>;
+};
+const DialogContent = ({ className, children, ref, ...props }: DialogContentProps) => (
     <DialogPortal>
         <DialogOverlay />
         <DialogPrimitive.Content
@@ -50,8 +49,7 @@ const DialogContent = React.forwardRef<
             </DialogPrimitive.Close>
         </DialogPrimitive.Content>
     </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+);
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
     <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
@@ -63,25 +61,19 @@ const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 );
 DialogFooter.displayName = 'DialogFooter';
 
-const DialogTitle = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Title
-        ref={ref}
-        className={cn('text-lg font-semibold leading-none tracking-tight', className)}
-        {...props}
-    />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+    ref?: React.Ref<React.ElementRef<typeof DialogPrimitive.Title>>;
+};
+const DialogTitle = ({ className, ref, ...props }: DialogTitleProps) => (
+    <DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+);
 
-const DialogDescription = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+    ref?: React.Ref<React.ElementRef<typeof DialogPrimitive.Description>>;
+};
+const DialogDescription = ({ className, ref, ...props }: DialogDescriptionProps) => (
     <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+);
 
 export {
     Dialog,
diff --git a/packages/ui/src/elements/dropdown-menu.tsx b/packages/ui/src/elements/dropdown-menu.tsx
index 49444137..4bfd1771 100644
--- a/packages/ui/src/elements/dropdown-menu.tsx
+++ b/packages/ui/src/elements/dropdown-menu.tsx
@@ -16,12 +16,11 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-        inset?: boolean;
-    }
->(({ className, inset, children, ...props }, ref) => (
+type DropdownMenuSubTriggerProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>>;
+};
+const DropdownMenuSubTrigger = ({ className, inset, children, ref, ...props }: DropdownMenuSubTriggerProps) => (
     <DropdownMenuPrimitive.SubTrigger
         ref={ref}
         className={cn(
@@ -34,13 +33,13 @@ const DropdownMenuSubTrigger = React.forwardRef<
         {children}
         <ChevronRight className="ml-auto" />
     </DropdownMenuPrimitive.SubTrigger>
-));
+);
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
-const DropdownMenuSubContent = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+type DropdownMenuSubContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
+};
+const DropdownMenuSubContent = ({ className, ref, ...props }: DropdownMenuSubContentProps) => (
     <DropdownMenuPrimitive.SubContent
         ref={ref}
         className={cn(
@@ -49,13 +48,13 @@ const DropdownMenuSubContent = React.forwardRef<
         )}
         {...props}
     />
-));
+);
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
-const DropdownMenuContent = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
+};
+const DropdownMenuContent = ({ className, sideOffset = 4, ref, ...props }: DropdownMenuContentProps) => (
     <DropdownMenuPrimitive.Portal>
         <DropdownMenuPrimitive.Content
             ref={ref}
@@ -67,15 +66,14 @@ const DropdownMenuContent = React.forwardRef<
             {...props}
         />
     </DropdownMenuPrimitive.Portal>
-));
+);
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const DropdownMenuItem = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-        inset?: boolean;
-    }
->(({ className, inset, ...props }, ref) => (
+type DropdownMenuItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Item>>;
+};
+const DropdownMenuItem = ({ className, inset, ref, ...props }: DropdownMenuItemProps) => (
     <DropdownMenuPrimitive.Item
         ref={ref}
         className={cn(
@@ -85,13 +83,13 @@ const DropdownMenuItem = React.forwardRef<
         )}
         {...props}
     />
-));
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
-const DropdownMenuCheckboxItem = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+type DropdownMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
+};
+const DropdownMenuCheckboxItem = ({ className, children, checked, ref, ...props }: DropdownMenuCheckboxItemProps) => (
     <DropdownMenuPrimitive.CheckboxItem
         ref={ref}
         className={cn(
@@ -108,13 +106,13 @@ const DropdownMenuCheckboxItem = React.forwardRef<
         </span>
         {children}
     </DropdownMenuPrimitive.CheckboxItem>
-));
+);
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
-const DropdownMenuRadioItem = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
+type DropdownMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
+};
+const DropdownMenuRadioItem = ({ className, children, ref, ...props }: DropdownMenuRadioItemProps) => (
     <DropdownMenuPrimitive.RadioItem
         ref={ref}
         className={cn(
@@ -130,30 +128,24 @@ const DropdownMenuRadioItem = React.forwardRef<
         </span>
         {children}
     </DropdownMenuPrimitive.RadioItem>
-));
+);
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-const DropdownMenuLabel = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-        inset?: boolean;
-    }
->(({ className, inset, ...props }, ref) => (
-    <DropdownMenuPrimitive.Label
-        ref={ref}
-        className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
-        {...props}
-    />
-));
+type DropdownMenuLabelProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Label>>;
+};
+const DropdownMenuLabel = ({ className, inset, ref, ...props }: DropdownMenuLabelProps) => (
+    <DropdownMenuPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)} {...props} />
+);
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
+type DropdownMenuSeparatorProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+    ref?: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
+};
+const DropdownMenuSeparator = ({ className, ref, ...props }: DropdownMenuSeparatorProps) => (
     <DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+);
 
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
     return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />;
diff --git a/packages/ui/src/elements/input.tsx b/packages/ui/src/elements/input.tsx
index 24603313..8895c200 100644
--- a/packages/ui/src/elements/input.tsx
+++ b/packages/ui/src/elements/input.tsx
@@ -18,65 +18,63 @@ export type InputProps<T extends AdornmentComponent = AdornmentComponent> =
             | never
         );
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, type, adornment, adornmentProps, ...props }, ref) => {
-        return (
-            <div className={cn('relative')}>
-                {adornment && adornmentProps?.behavior === 'prepend' && (
-                    <div
-                        className={cn(
-                            'absolute top-0 left-0 flex items-center justify-center min-w-10 h-10 text-muted-foreground',
-                        )}
-                    >
-                        {adornment}
-                    </div>
-                )}
-                <input
-                    type={type}
+export type InputOwnProps = InputProps & { ref?: React.Ref<HTMLInputElement> };
+
+const Input = ({ className, type, adornment, adornmentProps, ref, ...props }: InputOwnProps) => {
+    return (
+        <div className={cn('relative')}>
+            {adornment && adornmentProps?.behavior === 'prepend' && (
+                <div
                     className={cn(
-                        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-                        adornmentProps?.behavior === 'prepend' && 'pl-12',
-                        adornmentProps?.behavior === 'append' && 'pr-12',
-                        className,
+                        'absolute top-0 left-0 flex items-center justify-center min-w-10 h-10 text-muted-foreground',
                     )}
-                    ref={ref}
-                    {...props}
-                />
-                {adornment && adornmentProps?.behavior === 'append' && (
-                    <div
-                        className={cn(
-                            'absolute top-0 right-0 flex items-center justify-center min-w-10 h-10 text-muted-foreground',
-                        )}
-                    >
-                        {adornment}
-                    </div>
+                >
+                    {adornment}
+                </div>
+            )}
+            <input
+                type={type}
+                className={cn(
+                    'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+                    adornmentProps?.behavior === 'prepend' && 'pl-12',
+                    adornmentProps?.behavior === 'append' && 'pr-12',
+                    className,
                 )}
-            </div>
-        );
-    },
-);
-Input.displayName = 'Input';
+                ref={ref}
+                {...props}
+            />
+            {adornment && adornmentProps?.behavior === 'append' && (
+                <div
+                    className={cn(
+                        'absolute top-0 right-0 flex items-center justify-center min-w-10 h-10 text-muted-foreground',
+                    )}
+                >
+                    {adornment}
+                </div>
+            )}
+        </div>
+    );
+};
 
 export type InputWithLabelProps = InputProps & {
     label: string | React.ReactNode;
     labelClassName?: string;
 };
 
-const InputWithLabel = React.forwardRef<HTMLInputElement, InputWithLabelProps>(
-    ({ label, className, labelClassName, id, ...props }, ref) => {
-        const generatedId = React.useId();
-        const inputId = id || generatedId;
+export type InputWithLabelOwnProps = InputWithLabelProps & { ref?: React.Ref<HTMLInputElement> };
 
-        return (
-            <div className="grid gap-2">
-                <Label htmlFor={inputId} className={labelClassName}>
-                    {label}
-                </Label>
-                <Input id={inputId} ref={ref} {...props} className={className} />
-            </div>
-        );
-    },
-);
-InputWithLabel.displayName = 'InputWithLabel';
+const InputWithLabel = ({ label, className, labelClassName, id, ref, ...props }: InputWithLabelOwnProps) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+
+    return (
+        <div className="grid gap-2">
+            <Label htmlFor={inputId} className={labelClassName}>
+                {label}
+            </Label>
+            <Input id={inputId} ref={ref} {...props} className={className} />
+        </div>
+    );
+};
 
 export { Input, InputWithLabel };
diff --git a/packages/ui/src/elements/label.tsx b/packages/ui/src/elements/label.tsx
index bca2b0c5..d9b21258 100644
--- a/packages/ui/src/elements/label.tsx
+++ b/packages/ui/src/elements/label.tsx
@@ -8,12 +8,10 @@ const labelVariants = cva(
     'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer',
 );
 
-const Label = React.forwardRef<
-    React.ElementRef<typeof LabelPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
+type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants> & { ref?: React.Ref<React.ElementRef<typeof LabelPrimitive.Root>> };
+const Label = ({ className, ref, ...props }: LabelProps) => (
     <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+);
 
 export { Label };
diff --git a/packages/ui/src/elements/navigation-menu.tsx b/packages/ui/src/elements/navigation-menu.tsx
index da80dc1a..1d5fae58 100644
--- a/packages/ui/src/elements/navigation-menu.tsx
+++ b/packages/ui/src/elements/navigation-menu.tsx
@@ -5,10 +5,10 @@ import * as React from 'react';
 
 import { cn } from '@o2s/ui/lib/utils';
 
-const NavigationMenu = React.forwardRef<
-    React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+type NavigationMenuProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.Root>>;
+};
+const NavigationMenu = ({ className, children, ref, ...props }: NavigationMenuProps) => (
     <NavigationMenuPrimitive.Root
         ref={ref}
         className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
@@ -17,20 +17,18 @@ const NavigationMenu = React.forwardRef<
         {children}
         <NavigationMenuViewport />
     </NavigationMenuPrimitive.Root>
-));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+);
 
-const NavigationMenuList = React.forwardRef<
-    React.ElementRef<typeof NavigationMenuPrimitive.List>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
+type NavigationMenuListProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.List>>;
+};
+const NavigationMenuList = ({ className, ref, ...props }: NavigationMenuListProps) => (
     <NavigationMenuPrimitive.List
         ref={ref}
         className={cn('group flex flex-1 list-none items-center justify-center space-x-1', className)}
         {...props}
     />
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+);
 
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
@@ -38,28 +36,23 @@ const navigationMenuTriggerStyle = cva(
     'no-underline hover:no-underline group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 !text-base font-medium transition-colors focus-visible:outline-ring text-navbar-primary! hover:bg-navbar-accent-background! hover:text-navbar-sub-muted! disabled:pointer-events-none disabled:opacity-50 data-active:bg-navbar-sub-accent data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent/50 data-[state=open]:bg-accent/50',
 );
 
-const NavigationMenuTrigger = React.forwardRef<
-    React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-    <NavigationMenuPrimitive.Trigger
-        ref={ref}
-        className={cn(navigationMenuTriggerStyle(), 'group', className)}
-        {...props}
-    >
+type NavigationMenuTriggerProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.Trigger>>;
+};
+const NavigationMenuTrigger = ({ className, children, ref, ...props }: NavigationMenuTriggerProps) => (
+    <NavigationMenuPrimitive.Trigger ref={ref} className={cn(navigationMenuTriggerStyle(), 'group', className)} {...props}>
         {children}{' '}
         <ChevronDown
             className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
             aria-hidden="true"
         />
     </NavigationMenuPrimitive.Trigger>
-));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+);
 
-const NavigationMenuContent = React.forwardRef<
-    React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
+type NavigationMenuContentProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.Content>>;
+};
+const NavigationMenuContent = ({ className, ref, ...props }: NavigationMenuContentProps) => (
     <NavigationMenuPrimitive.Content
         ref={ref}
         className={cn(
@@ -68,15 +61,14 @@ const NavigationMenuContent = React.forwardRef<
         )}
         {...props}
     />
-));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+);
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
-const NavigationMenuViewport = React.forwardRef<
-    React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
+type NavigationMenuViewportProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.Viewport>>;
+};
+const NavigationMenuViewport = ({ className, ref, ...props }: NavigationMenuViewportProps) => (
     <div className={cn('absolute left-0 top-full flex justify-center')}>
         <NavigationMenuPrimitive.Viewport
             className={cn(
@@ -87,13 +79,12 @@ const NavigationMenuViewport = React.forwardRef<
             {...props}
         />
     </div>
-));
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+);
 
-const NavigationMenuIndicator = React.forwardRef<
-    React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
+type NavigationMenuIndicatorProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> & {
+    ref?: React.Ref<React.ElementRef<typeof NavigationMenuPrimitive.Indicator>>;
+};
+const NavigationMenuIndicator = ({ className, ref, ...props }: NavigationMenuIndicatorProps) => (
     <NavigationMenuPrimitive.Indicator
         ref={ref}
         className={cn(
@@ -104,8 +95,7 @@ const NavigationMenuIndicator = React.forwardRef<
     >
         <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
     </NavigationMenuPrimitive.Indicator>
-));
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+);
 
 export {
     navigationMenuTriggerStyle,
diff --git a/packages/ui/src/elements/pagination.tsx b/packages/ui/src/elements/pagination.tsx
index bec192ad..9c2924bb 100644
--- a/packages/ui/src/elements/pagination.tsx
+++ b/packages/ui/src/elements/pagination.tsx
@@ -16,17 +16,15 @@ const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
 );
 Pagination.displayName = 'Pagination';
 
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
-    ({ className, ...props }, ref) => (
-        <ul ref={ref} className={cn('flex flex-row items-center gap-2', className)} {...props} />
-    ),
+type PaginationContentProps = React.ComponentProps<'ul'> & { ref?: React.Ref<HTMLUListElement> };
+const PaginationContent = ({ className, ref, ...props }: PaginationContentProps) => (
+    <ul ref={ref} className={cn('flex flex-row items-center gap-2', className)} {...props} />
 );
-PaginationContent.displayName = 'PaginationContent';
 
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (
+type PaginationItemProps = React.ComponentProps<'li'> & { ref?: React.Ref<HTMLLIElement> };
+const PaginationItem = ({ className, ref, ...props }: PaginationItemProps) => (
     <li ref={ref} className={cn('', className)} {...props} />
-));
-PaginationItem.displayName = 'PaginationItem';
+);
 
 type PaginationLinkProps = {
     isActive?: boolean;
diff --git a/packages/ui/src/elements/popover.tsx b/packages/ui/src/elements/popover.tsx
index bb269557..66fab5c1 100644
--- a/packages/ui/src/elements/popover.tsx
+++ b/packages/ui/src/elements/popover.tsx
@@ -7,10 +7,10 @@ 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) => (
+type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;
+};
+const PopoverContent = ({ className, align = 'center', sideOffset = 4, ref, ...props }: PopoverContentProps) => (
     <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
             ref={ref}
@@ -23,7 +23,6 @@ const PopoverContent = React.forwardRef<
             {...props}
         />
     </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+);
 
 export { Popover, PopoverTrigger, PopoverContent };
diff --git a/packages/ui/src/elements/progress.tsx b/packages/ui/src/elements/progress.tsx
index aefef98a..a3423993 100644
--- a/packages/ui/src/elements/progress.tsx
+++ b/packages/ui/src/elements/progress.tsx
@@ -7,29 +7,29 @@ export interface ProgressProps extends React.ComponentPropsWithoutRef<typeof Pro
     orientation?: 'horizontal' | 'vertical';
 }
 
-const Progress = React.forwardRef<React.ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(
-    ({ className, value, orientation = 'horizontal', ...props }, ref) => (
-        <ProgressPrimitive.Root
-            ref={ref}
-            className={cn(
-                'relative overflow-hidden rounded-full bg-secondary',
-                orientation === 'horizontal' ? 'h-4 w-full' : 'h-40 w-4',
-                className,
-            )}
-            {...props}
-        >
-            <ProgressPrimitive.Indicator
-                className="h-full w-full flex-1 bg-primary transition-all"
-                style={{
-                    transform:
-                        orientation === 'horizontal'
-                            ? `translateX(-${100 - (value || 0)}%)`
-                            : `translateY(-${100 - (value || 0)}%)`,
-                }}
-            />
-        </ProgressPrimitive.Root>
-    ),
+type ProgressOwnProps = ProgressProps & {
+    ref?: React.Ref<React.ElementRef<typeof ProgressPrimitive.Root>>;
+};
+const Progress = ({ className, value, orientation = 'horizontal', ref, ...props }: ProgressOwnProps) => (
+    <ProgressPrimitive.Root
+        ref={ref}
+        className={cn(
+            'relative overflow-hidden rounded-full bg-secondary',
+            orientation === 'horizontal' ? 'h-4 w-full' : 'h-40 w-4',
+            className,
+        )}
+        {...props}
+    >
+        <ProgressPrimitive.Indicator
+            className="h-full w-full flex-1 bg-primary transition-all"
+            style={{
+                transform:
+                    orientation === 'horizontal'
+                        ? `translateX(-${100 - (value || 0)}%)`
+                        : `translateY(-${100 - (value || 0)}%)`,
+            }}
+        />
+    </ProgressPrimitive.Root>
 );
-Progress.displayName = ProgressPrimitive.Root.displayName;
 
 export { Progress };
diff --git a/packages/ui/src/elements/radio-group.tsx b/packages/ui/src/elements/radio-group.tsx
index 4352c772..80a8613c 100644
--- a/packages/ui/src/elements/radio-group.tsx
+++ b/packages/ui/src/elements/radio-group.tsx
@@ -6,18 +6,17 @@ import { cn } from '@o2s/ui/lib/utils';
 
 import { Label } from '@o2s/ui/elements/label';
 
-const RadioGroup = React.forwardRef<
-    React.ElementRef<typeof RadioGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
+type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
+};
+const RadioGroup = ({ className, ref, ...props }: RadioGroupProps) => {
     return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+};
 
-const RadioGroupItem = React.forwardRef<
-    React.ElementRef<typeof RadioGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+    ref?: React.Ref<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
+};
+const RadioGroupItem = ({ className, ref, ...props }: RadioGroupItemProps) => {
     return (
         <RadioGroupPrimitive.Item
             ref={ref}
@@ -32,18 +31,17 @@ const RadioGroupItem = React.forwardRef<
             </RadioGroupPrimitive.Indicator>
         </RadioGroupPrimitive.Item>
     );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+};
 
 interface RadioGroupItemWithLabelProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
     label: string | React.ReactNode;
     labelClassName?: string;
 }
 
-const RadioGroupItemWithLabel = React.forwardRef<
-    React.ElementRef<typeof RadioGroupPrimitive.Item>,
-    RadioGroupItemWithLabelProps
->(({ className, label, labelClassName, id, ...props }, ref) => {
+type RadioGroupItemWithLabelOwnProps = RadioGroupItemWithLabelProps & {
+    ref?: React.Ref<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
+};
+const RadioGroupItemWithLabel = ({ className, label, labelClassName, id, ref, ...props }: RadioGroupItemWithLabelOwnProps) => {
     const generatedId = React.useId();
     const radioId = id || generatedId;
 
@@ -55,7 +53,6 @@ const RadioGroupItemWithLabel = React.forwardRef<
             </Label>
         </div>
     );
-});
-RadioGroupItemWithLabel.displayName = 'RadioGroupItemWithLabel';
+};
 
 export { RadioGroup, RadioGroupItem, RadioGroupItemWithLabel };
diff --git a/packages/ui/src/elements/select.tsx b/packages/ui/src/elements/select.tsx
index 73c5e507..d8534289 100644
--- a/packages/ui/src/elements/select.tsx
+++ b/packages/ui/src/elements/select.tsx
@@ -34,50 +34,40 @@ export interface SelectTriggerProps
     extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
         VariantProps<typeof selectVariants> {}
 
-const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(
-    ({ variant, className, children, ...props }, ref) => (
-        <SelectPrimitive.Trigger ref={ref} className={cn(selectVariants({ variant, className }))} {...props}>
-            {children}
-            <SelectPrimitive.Icon asChild>
-                <ChevronDown className="h-4 w-4 opacity-50" />
-            </SelectPrimitive.Icon>
-        </SelectPrimitive.Trigger>
-    ),
+type SelectTriggerOwnProps = SelectTriggerProps & {
+    ref?: React.Ref<React.ElementRef<typeof SelectPrimitive.Trigger>>;
+};
+const SelectTrigger = ({ variant, className, children, ref, ...props }: SelectTriggerOwnProps) => (
+    <SelectPrimitive.Trigger ref={ref} className={cn(selectVariants({ variant, className }))} {...props}>
+        {children}
+        <SelectPrimitive.Icon asChild>
+            <ChevronDown className="h-4 w-4 opacity-50" />
+        </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
 );
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
-const SelectScrollUpButton = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.ScrollUpButton
-        ref={ref}
-        className={cn('flex cursor-default items-center justify-center py-1', className)}
-        {...props}
-    >
+type SelectScrollUpButtonProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
+    ref?: React.Ref<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;
+};
+const SelectScrollUpButton = ({ className, ref, ...props }: SelectScrollUpButtonProps) => (
+    <SelectPrimitive.ScrollUpButton ref={ref} className={cn('flex cursor-default items-center justify-center py-1', className)} {...props}>
         <ChevronUp className="h-4 w-4" />
     </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.ScrollDownButton
-        ref={ref}
-        className={cn('flex cursor-default items-center justify-center py-1', className)}
-        {...props}
-    >
+);
+
+type SelectScrollDownButtonProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
+    ref?: React.Ref<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>;
+};
+const SelectScrollDownButton = ({ className, ref, ...props }: SelectScrollDownButtonProps) => (
+    <SelectPrimitive.ScrollDownButton ref={ref} className={cn('flex cursor-default items-center justify-center py-1', className)} {...props}>
         <ChevronDown className="h-4 w-4" />
     </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+);
 
-const SelectContent = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
+type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof SelectPrimitive.Content>>;
+};
+const SelectContent = ({ className, children, position = 'popper', ref, ...props }: SelectContentProps) => (
     <SelectPrimitive.Portal>
         <SelectPrimitive.Content
             ref={ref}
@@ -103,21 +93,19 @@ const SelectContent = React.forwardRef<
             <SelectScrollDownButton />
         </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
+);
 
-const SelectLabel = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Label>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
+type SelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
+    ref?: React.Ref<React.ElementRef<typeof SelectPrimitive.Label>>;
+};
+const SelectLabel = ({ className, ref, ...props }: SelectLabelProps) => (
     <SelectPrimitive.Label ref={ref} className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} {...props} />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
+);
 
-const SelectItem = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
+type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+    ref?: React.Ref<React.ElementRef<typeof SelectPrimitive.Item>>;
+};
+const SelectItem = ({ className, children, ref, ...props }: SelectItemProps) => (
     <SelectPrimitive.Item
         ref={ref}
         className={cn(
@@ -134,16 +122,14 @@ const SelectItem = React.forwardRef<
 
         <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
+);
 
-const SelectSeparator = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
+type SelectSeparatorProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
+    ref?: React.Ref<React.ElementRef<typeof SelectPrimitive.Separator>>;
+};
+const SelectSeparator = ({ className, ref, ...props }: SelectSeparatorProps) => (
     <SelectPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+);
 
 interface SelectWithTitleProps {
     label: string | React.ReactNode;
@@ -162,8 +148,8 @@ interface SelectWithTitleProps {
     children: React.ReactNode;
 }
 
-const SelectWithTitle = React.forwardRef<HTMLDivElement, SelectWithTitleProps>(
-    ({ label, labelClassName, children, id, ...props }, ref) => {
+type SelectWithTitleOwnProps = SelectWithTitleProps & { ref?: React.Ref<HTMLDivElement> };
+const SelectWithTitle = ({ label, labelClassName, children, id, ref, ...props }: SelectWithTitleOwnProps) => {
         const generatedId = React.useId();
         const selectId = id || generatedId;
 
@@ -175,9 +161,7 @@ const SelectWithTitle = React.forwardRef<HTMLDivElement, SelectWithTitleProps>(
                 <Select {...props}>{children}</Select>
             </div>
         );
-    },
-);
-SelectWithTitle.displayName = 'SelectWithTitle';
+};
 
 export {
     Select,
diff --git a/packages/ui/src/elements/separator.tsx b/packages/ui/src/elements/separator.tsx
index 93116bde..31363201 100644
--- a/packages/ui/src/elements/separator.tsx
+++ b/packages/ui/src/elements/separator.tsx
@@ -3,10 +3,10 @@ import * as React from 'react';
 
 import { cn } from '@o2s/ui/lib/utils';
 
-const Separator = React.forwardRef<
-    React.ElementRef<typeof SeparatorPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof SeparatorPrimitive.Root>>;
+};
+const Separator = ({ className, orientation = 'horizontal', decorative = true, ref, ...props }: SeparatorProps) => (
     <SeparatorPrimitive.Root
         ref={ref}
         decorative={decorative}
@@ -18,7 +18,6 @@ const Separator = React.forwardRef<
         )}
         {...props}
     />
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+);
 
 export { Separator };
diff --git a/packages/ui/src/elements/sheet.tsx b/packages/ui/src/elements/sheet.tsx
index 7165d933..49fd7ce5 100644
--- a/packages/ui/src/elements/sheet.tsx
+++ b/packages/ui/src/elements/sheet.tsx
@@ -15,10 +15,10 @@ const SheetClose = SheetPrimitive.Close;
 
 const SheetPortal = SheetPrimitive.Portal;
 
-const SheetOverlay = React.forwardRef<
-    React.ElementRef<typeof SheetPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+type SheetOverlayProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
+    ref?: React.Ref<React.ElementRef<typeof SheetPrimitive.Overlay>>;
+};
+const SheetOverlay = ({ className, ref, ...props }: SheetOverlayProps) => (
     <SheetPrimitive.Overlay
         className={cn(
             'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
@@ -27,8 +27,7 @@ const SheetOverlay = React.forwardRef<
         {...props}
         ref={ref}
     />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+);
 
 const sheetVariants = cva(
     'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
@@ -53,21 +52,21 @@ interface SheetContentProps
     closeLabel: string;
 }
 
-const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
-    ({ side = 'right', closeLabel, className, children, ...props }, ref) => (
-        <SheetPortal>
-            <SheetOverlay />
-            <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
-                {children}
-                <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-                    <X className="h-4 w-4" />
-                    <span className="sr-only">{closeLabel}</span>
-                </SheetPrimitive.Close>
-            </SheetPrimitive.Content>
-        </SheetPortal>
-    ),
+type SheetContentOwnProps = SheetContentProps & {
+    ref?: React.Ref<React.ElementRef<typeof SheetPrimitive.Content>>;
+};
+const SheetContent = ({ side = 'right', closeLabel, className, children, ref, ...props }: SheetContentOwnProps) => (
+    <SheetPortal>
+        <SheetOverlay />
+        <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+            {children}
+            <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+                <X className="h-4 w-4" />
+                <span className="sr-only">{closeLabel}</span>
+            </SheetPrimitive.Close>
+        </SheetPrimitive.Content>
+    </SheetPortal>
 );
-SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
     <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
@@ -79,21 +78,19 @@ const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
 );
 SheetFooter.displayName = 'SheetFooter';
 
-const SheetTitle = React.forwardRef<
-    React.ElementRef<typeof SheetPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
+type SheetTitleProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
+    ref?: React.Ref<React.ElementRef<typeof SheetPrimitive.Title>>;
+};
+const SheetTitle = ({ className, ref, ...props }: SheetTitleProps) => (
     <SheetPrimitive.Title ref={ref} className={cn('text-lg font-semibold text-foreground', className)} {...props} />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
+);
 
-const SheetDescription = React.forwardRef<
-    React.ElementRef<typeof SheetPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
+type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
+    ref?: React.Ref<React.ElementRef<typeof SheetPrimitive.Description>>;
+};
+const SheetDescription = ({ className, ref, ...props }: SheetDescriptionProps) => (
     <SheetPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
+);
 
 export {
     Sheet,
diff --git a/packages/ui/src/elements/switch.tsx b/packages/ui/src/elements/switch.tsx
index 9a79b72f..110165ec 100644
--- a/packages/ui/src/elements/switch.tsx
+++ b/packages/ui/src/elements/switch.tsx
@@ -4,10 +4,10 @@ import * as React from 'react';
 
 import { cn } from '@o2s/ui/lib/utils';
 
-const Switch = React.forwardRef<
-    React.ElementRef<typeof SwitchPrimitives.Root>,
-    React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
+type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof SwitchPrimitives.Root>>;
+};
+const Switch = ({ className, ref, ...props }: SwitchProps) => (
     <SwitchPrimitives.Root
         className={cn(
             'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
@@ -22,8 +22,7 @@ const Switch = React.forwardRef<
             )}
         />
     </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
+);
 
 const SwitchWithLabel = ({
     label,
diff --git a/packages/ui/src/elements/table.tsx b/packages/ui/src/elements/table.tsx
index dad2be7d..da5fce59 100644
--- a/packages/ui/src/elements/table.tsx
+++ b/packages/ui/src/elements/table.tsx
@@ -2,53 +2,37 @@ import * as React from 'react';
 
 import { cn } from '@o2s/ui/lib/utils';
 
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-    ({ className, ...props }, ref) => (
-        <div className="relative w-full overflow-auto">
-            <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
-        </div>
-    ),
+type TableProps = React.HTMLAttributes<HTMLTableElement> & { ref?: React.Ref<HTMLTableElement> };
+const Table = ({ className, ref, ...props }: TableProps) => (
+    <div className="relative w-full overflow-auto">
+        <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
 );
-Table.displayName = 'Table';
 
-const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-    ({ className, ...props }, ref) => <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />,
+type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement> & { ref?: React.Ref<HTMLTableSectionElement> };
+const TableHeader = ({ className, ref, ...props }: TableHeaderProps) => (
+    <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
 );
-TableHeader.displayName = 'TableHeader';
 
-const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-    ({ className, ...props }, ref) => (
-        <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
-    ),
+type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement> & { ref?: React.Ref<HTMLTableSectionElement> };
+const TableBody = ({ className, ref, ...props }: TableBodyProps) => (
+    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
 );
-TableBody.displayName = 'TableBody';
 
-const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-    ({ className, ...props }, ref) => (
-        <tfoot
-            ref={ref}
-            className={cn('border-t bg-muted/50 font-medium last:[&>tr]:border-b-0', className)}
-            {...props}
-        />
-    ),
+type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement> & { ref?: React.Ref<HTMLTableSectionElement> };
+const TableFooter = ({ className, ref, ...props }: TableFooterProps) => (
+    <tfoot ref={ref} className={cn('border-t bg-muted/50 font-medium last:[&>tr]:border-b-0', className)} {...props} />
 );
-TableFooter.displayName = 'TableFooter';
 
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-    ({ className, ...props }, ref) => (
-        <tr
-            ref={ref}
-            className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
-            {...props}
-        />
-    ),
+type TableRowProps = React.HTMLAttributes<HTMLTableRowElement> & { ref?: React.Ref<HTMLTableRowElement> };
+const TableRow = ({ className, ref, ...props }: TableRowProps) => (
+    <tr ref={ref} className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)} {...props} />
 );
-TableRow.displayName = 'TableRow';
 
-const TableHead = React.forwardRef<
-    HTMLTableCellElement,
-    React.ThHTMLAttributes<HTMLTableCellElement> & React.HTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & React.HTMLAttributes<HTMLTableCellElement> & {
+    ref?: React.Ref<HTMLTableCellElement>;
+};
+const TableHead = ({ className, ref, ...props }: TableHeadProps) => (
     <th
         ref={ref}
         className={cn(
@@ -57,22 +41,18 @@ const TableHead = React.forwardRef<
         )}
         {...props}
     />
-));
-TableHead.displayName = 'TableHead';
+);
 
-const TableCell = React.forwardRef<
-    HTMLTableCellElement,
-    React.TdHTMLAttributes<HTMLTableCellElement> & React.HTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement> & React.HTMLAttributes<HTMLTableCellElement> & {
+    ref?: React.Ref<HTMLTableCellElement>;
+};
+const TableCell = ({ className, ref, ...props }: TableCellProps) => (
     <td ref={ref} className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} />
-));
-TableCell.displayName = 'TableCell';
+);
 
-const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
-    ({ className, ...props }, ref) => (
-        <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
-    ),
+type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement> & { ref?: React.Ref<HTMLTableCaptionElement> };
+const TableCaption = ({ className, ref, ...props }: TableCaptionProps) => (
+    <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
 );
-TableCaption.displayName = 'TableCaption';
 
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/ui/src/elements/textarea.tsx b/packages/ui/src/elements/textarea.tsx
index 0778fd0f..8652457a 100644
--- a/packages/ui/src/elements/textarea.tsx
+++ b/packages/ui/src/elements/textarea.tsx
@@ -4,42 +4,40 @@ import { cn } from '@o2s/ui/lib/utils';
 
 import { Label } from '@o2s/ui/elements/label';
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(
-    ({ className, ...props }, ref) => {
-        return (
-            <textarea
-                className={cn(
-                    'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-                    className,
-                )}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-Textarea.displayName = 'Textarea';
+export type TextareaProps = React.ComponentProps<'textarea'> & { ref?: React.Ref<HTMLTextAreaElement> };
+
+const Textarea = ({ className, ref, ...props }: TextareaProps) => {
+    return (
+        <textarea
+            className={cn(
+                'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+                className,
+            )}
+            ref={ref}
+            {...props}
+        />
+    );
+};
 
 export interface TextareaWithLabelProps extends React.ComponentProps<'textarea'> {
     label: string | React.ReactNode;
     labelClassName?: string;
 }
 
-const TextareaWithLabel = React.forwardRef<HTMLTextAreaElement, TextareaWithLabelProps>(
-    ({ className, label, labelClassName, id, ...props }, ref) => {
-        const generatedId = React.useId();
-        const textareaId = id || generatedId;
-
-        return (
-            <div className="grid gap-2">
-                <Label htmlFor={textareaId} className={labelClassName}>
-                    {label}
-                </Label>
-                <Textarea id={textareaId} ref={ref} {...props} className={className} />
-            </div>
-        );
-    },
-);
-TextareaWithLabel.displayName = 'TextareaWithLabel';
+export type TextareaWithLabelOwnProps = TextareaWithLabelProps & { ref?: React.Ref<HTMLTextAreaElement> };
+
+const TextareaWithLabel = ({ className, label, labelClassName, id, ref, ...props }: TextareaWithLabelOwnProps) => {
+    const generatedId = React.useId();
+    const textareaId = id || generatedId;
+
+    return (
+        <div className="grid gap-2">
+            <Label htmlFor={textareaId} className={labelClassName}>
+                {label}
+            </Label>
+            <Textarea id={textareaId} ref={ref} {...props} className={className} />
+        </div>
+    );
+};
 
 export { Textarea, TextareaWithLabel };
diff --git a/packages/ui/src/elements/toast.tsx b/packages/ui/src/elements/toast.tsx
index f2b1bd87..71c6e55f 100644
--- a/packages/ui/src/elements/toast.tsx
+++ b/packages/ui/src/elements/toast.tsx
@@ -7,10 +7,10 @@ import { cn } from '@o2s/ui/lib/utils';
 
 const ToastProvider = ToastPrimitives.Provider;
 
-const ToastViewport = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Viewport>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
+type ToastViewportProps = React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
+    ref?: React.Ref<React.ElementRef<typeof ToastPrimitives.Viewport>>;
+};
+const ToastViewport = ({ className, ref, ...props }: ToastViewportProps) => (
     <ToastPrimitives.Viewport
         ref={ref}
         className={cn(
@@ -19,8 +19,7 @@ const ToastViewport = React.forwardRef<
         )}
         {...props}
     />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+);
 
 const toastVariants = cva(
     'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full',
@@ -37,18 +36,16 @@ const toastVariants = cva(
     },
 );
 
-const Toast = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Root>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
+type ToastOwnProps = React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants> & { ref?: React.Ref<React.ElementRef<typeof ToastPrimitives.Root>> };
+const Toast = ({ className, variant, ref, ...props }: ToastOwnProps) => {
     return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
+};
 
-const ToastAction = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Action>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
+type ToastActionProps = React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
+    ref?: React.Ref<React.ElementRef<typeof ToastPrimitives.Action>>;
+};
+const ToastAction = ({ className, ref, ...props }: ToastActionProps) => (
     <ToastPrimitives.Action
         ref={ref}
         className={cn(
@@ -57,13 +54,12 @@ const ToastAction = React.forwardRef<
         )}
         {...props}
     />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
+);
 
-const ToastClose = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Close>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
+type ToastCloseProps = React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
+    ref?: React.Ref<React.ElementRef<typeof ToastPrimitives.Close>>;
+};
+const ToastClose = ({ className, ref, ...props }: ToastCloseProps) => (
     <ToastPrimitives.Close
         ref={ref}
         className={cn(
@@ -75,24 +71,21 @@ const ToastClose = React.forwardRef<
     >
         <X className="h-4 w-4" />
     </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
+);
 
-const ToastTitle = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Title>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
+type ToastTitleProps = React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
+    ref?: React.Ref<React.ElementRef<typeof ToastPrimitives.Title>>;
+};
+const ToastTitle = ({ className, ref, ...props }: ToastTitleProps) => (
     <ToastPrimitives.Title ref={ref} className={cn('text-sm font-semibold', className)} {...props} />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
+);
 
-const ToastDescription = React.forwardRef<
-    React.ElementRef<typeof ToastPrimitives.Description>,
-    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
+type ToastDescriptionProps = React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
+    ref?: React.Ref<React.ElementRef<typeof ToastPrimitives.Description>>;
+};
+const ToastDescription = ({ className, ref, ...props }: ToastDescriptionProps) => (
     <ToastPrimitives.Description ref={ref} className={cn('text-sm opacity-90', className)} {...props} />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
+);
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
diff --git a/packages/ui/src/elements/toggle-group.tsx b/packages/ui/src/elements/toggle-group.tsx
index eee2fde9..3651ad8e 100644
--- a/packages/ui/src/elements/toggle-group.tsx
+++ b/packages/ui/src/elements/toggle-group.tsx
@@ -24,10 +24,9 @@ const toggleGroupVariants = cva('flex items-center justify-center gap-1', {
     },
 });
 
-const ToggleGroup = React.forwardRef<
-    React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => {
+type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants> & { ref?: React.Ref<React.ElementRef<typeof ToggleGroupPrimitive.Root>> };
+const ToggleGroup = ({ className, variant, size, children, ref, ...props }: ToggleGroupProps) => {
     const context = React.useContext(ToggleGroupContext);
 
     return (
@@ -44,14 +43,11 @@ const ToggleGroup = React.forwardRef<
             <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
         </ToggleGroupPrimitive.Root>
     );
-});
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+};
 
-const ToggleGroupItem = React.forwardRef<
-    React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
+type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants> & { ref?: React.Ref<React.ElementRef<typeof ToggleGroupPrimitive.Item>> };
+const ToggleGroupItem = ({ className, children, variant, size, ref, ...props }: ToggleGroupItemProps) => {
     const context = React.useContext(ToggleGroupContext);
 
     return (
@@ -69,8 +65,6 @@ const ToggleGroupItem = React.forwardRef<
             {children}
         </ToggleGroupPrimitive.Item>
     );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+};
 
 export { ToggleGroup, ToggleGroupItem };
diff --git a/packages/ui/src/elements/toggle.tsx b/packages/ui/src/elements/toggle.tsx
index 00356595..9d3ecc18 100644
--- a/packages/ui/src/elements/toggle.tsx
+++ b/packages/ui/src/elements/toggle.tsx
@@ -28,13 +28,10 @@ const toggleVariants = cva(
     },
 );
 
-const Toggle = React.forwardRef<
-    React.ElementRef<typeof TogglePrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
+type ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants> & { ref?: React.Ref<React.ElementRef<typeof TogglePrimitive.Root>> };
+const Toggle = ({ className, variant, size, ref, ...props }: ToggleProps) => (
     <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
+);
 
 export { Toggle, toggleVariants };
diff --git a/packages/ui/src/elements/tooltip.tsx b/packages/ui/src/elements/tooltip.tsx
index a0561fff..f040ed96 100644
--- a/packages/ui/src/elements/tooltip.tsx
+++ b/packages/ui/src/elements/tooltip.tsx
@@ -9,10 +9,10 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = React.forwardRef<
-    React.ElementRef<typeof TooltipPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof TooltipPrimitive.Content>>;
+};
+const TooltipContent = ({ className, sideOffset = 4, ref, ...props }: TooltipContentProps) => (
     <TooltipPrimitive.Content
         ref={ref}
         sideOffset={sideOffset}
@@ -22,7 +22,6 @@ const TooltipContent = React.forwardRef<
         )}
         {...props}
     />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+);
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/packages/ui/src/elements/typography.tsx b/packages/ui/src/elements/typography.tsx
index ecc3f0f4..343a138f 100644
--- a/packages/ui/src/elements/typography.tsx
+++ b/packages/ui/src/elements/typography.tsx
@@ -45,14 +45,12 @@ export interface TypographyProps
     extends React.HTMLAttributes<HTMLParagraphElement>,
         VariantProps<typeof typographyVariants> {
     asChild?: boolean;
+    ref?: React.Ref<HTMLParagraphElement>;
 }
 
-const Typography = React.forwardRef<HTMLParagraphElement, TypographyProps>(
-    ({ className, variant, asChild = false, ...props }, ref) => {
-        const Comp = asChild ? Slot : 'p';
-        return <Comp className={cn(typographyVariants({ variant, className }))} ref={ref} {...props} />;
-    },
-);
-Typography.displayName = 'Typography';
+const Typography = ({ className, variant, asChild = false, ref, ...props }: TypographyProps) => {
+    const Comp = asChild ? Slot : 'p';
+    return <Comp className={cn(typographyVariants({ variant, className }))} ref={ref} {...props} />;
+};
 
 export { Typography, typographyVariants };

From 4eba8f803540c80a668a7a414257081e1ef3d1c4 Mon Sep 17 00:00:00 2001
From: Aditya <2005akjha@gmail.com>
Date: Fri, 17 Oct 2025 17:24:52 +0530
Subject: [PATCH 2/2] feat(ui): Add PhoneInput component with international
 formatting support

---
 packages/ui/package.json                      | 152 +++++++++---------
 .../ui/src/components/PhoneInput/index.ts     |   4 +
 packages/ui/src/elements/phone-input.tsx      | 148 +++++++++++++++++
 packages/ui/src/lib/phone/metadata.json       |  43 +++++
 packages/ui/tsconfig.json                     |   3 +
 5 files changed, 275 insertions(+), 75 deletions(-)
 create mode 100644 packages/ui/src/components/PhoneInput/index.ts
 create mode 100644 packages/ui/src/elements/phone-input.tsx
 create mode 100644 packages/ui/src/lib/phone/metadata.json

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 9198559b..441a59ec 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,77 +1,79 @@
 {
-    "name": "@o2s/ui",
-    "version": "1.4.0",
-    "private": true,
-    "license": "MIT",
-    "exports": {
-        "./globals": "./src/globals.css",
-        "./theme": "./src/theme.css",
-        "./postcss.config": "./postcss.config.mjs",
-        "./lib/*": "./src/lib/*.ts",
-        "./hooks/*": "./src/hooks/*.ts",
-        "./providers/*": "./src/providers/*/index.ts",
-        "./elements/*": "./src/elements/*.tsx",
-        "./components/*": "./src/components/*/index.ts"
-    },
-    "scripts": {
-        "lint": "tsc --noEmit && eslint . --max-warnings 0",
-        "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,json}\"",
-        "generate:component": "turbo gen react-component",
-        "generate:component:shadcn": "npx shadcn@latest add"
-    },
-    "devDependencies": {
-        "@o2s/eslint-config": "*",
-        "@o2s/prettier-config": "*",
-        "@o2s/typescript-config": "*",
-        "@tailwindcss/postcss": "^4.1.14",
-        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-        "@turbo/gen": "^2.5.8",
-        "@types/eslint": "^9.6.1",
-        "@types/node": "^24.7.2",
-        "eslint": "^9.37.0",
-        "prettier": "^3.6.2",
-        "sass": "^1.93.2",
-        "tw-animate-css": "^1.4.0",
-        "typescript": "^5.9.3"
-    },
-    "dependencies": {
-        "@o2s/framework": "*",
-        "@radix-ui/react-accordion": "^1.2.12",
-        "@radix-ui/react-avatar": "^1.1.10",
-        "@radix-ui/react-checkbox": "^1.3.3",
-        "@radix-ui/react-collapsible": "^1.1.12",
-        "@radix-ui/react-dialog": "^1.1.15",
-        "@radix-ui/react-dropdown-menu": "^2.1.16",
-        "@radix-ui/react-label": "^2.1.7",
-        "@radix-ui/react-navigation-menu": "^1.2.14",
-        "@radix-ui/react-popover": "^1.1.15",
-        "@radix-ui/react-progress": "^1.1.7",
-        "@radix-ui/react-radio-group": "^1.3.8",
-        "@radix-ui/react-select": "^2.2.6",
-        "@radix-ui/react-separator": "^1.1.7",
-        "@radix-ui/react-slot": "^1.2.3",
-        "@radix-ui/react-switch": "^1.2.6",
-        "@radix-ui/react-toast": "^1.2.15",
-        "@radix-ui/react-toggle": "^1.1.10",
-        "@radix-ui/react-toggle-group": "^1.1.11",
-        "@radix-ui/react-tooltip": "^1.2.8",
-        "class-variance-authority": "^0.7.1",
-        "classnames": "^2.5.1",
-        "clsx": "^2.1.1",
-        "cmdk": "^1.1.1",
-        "date-fns": "^4.1.0",
-        "lucide-react": "^0.545.0",
-        "react-day-picker": "^9.11.1",
-        "markdown-to-jsx": "^7.7.15",
-        "recharts": "^2.15.4",
-        "tailwind-merge": "^3.3.1",
-        "tailwindcss-animate": "^1.0.7"
-    },
-    "peerDependencies": {
-        "@types/react": "^19",
-        "@types/react-dom": "^19",
-        "react": "^19",
-        "react-dom": "^19",
-        "tailwindcss": "^4"
-    }
+  "name": "@o2s/ui",
+  "version": "1.4.0",
+  "private": true,
+  "license": "MIT",
+  "exports": {
+    "./globals": "./src/globals.css",
+    "./theme": "./src/theme.css",
+    "./postcss.config": "./postcss.config.mjs",
+    "./lib/*": "./src/lib/*.ts",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./providers/*": "./src/providers/*/index.ts",
+    "./elements/*": "./src/elements/*.tsx",
+    "./components/*": "./src/components/*/index.ts"
+  },
+  "scripts": {
+    "lint": "tsc --noEmit && eslint . --max-warnings 0",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,json}\"",
+    "generate:component": "turbo gen react-component",
+    "generate:component:shadcn": "npx shadcn@latest add"
+  },
+  "devDependencies": {
+    "@o2s/eslint-config": "*",
+    "@o2s/prettier-config": "*",
+    "@o2s/typescript-config": "*",
+    "@tailwindcss/postcss": "^4.1.14",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@turbo/gen": "^2.5.8",
+    "@types/eslint": "^9.6.1",
+    "@types/node": "^24.7.2",
+    "eslint": "^9.37.0",
+    "prettier": "^3.6.2",
+    "sass": "^1.93.2",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@o2s/framework": "*",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.545.0",
+    "react-day-picker": "^9.11.1",
+    "markdown-to-jsx": "^7.7.15",
+    "recharts": "^2.15.4",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "libphonenumber-js": "^1.11.18",
+    "input-format": "^0.3.14"
+  },
+  "peerDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwindcss": "^4"
+  }
 }
diff --git a/packages/ui/src/components/PhoneInput/index.ts b/packages/ui/src/components/PhoneInput/index.ts
new file mode 100644
index 00000000..5572f79a
--- /dev/null
+++ b/packages/ui/src/components/PhoneInput/index.ts
@@ -0,0 +1,4 @@
+export { default as PhoneInput } from '../../elements/phone-input';
+export type { PhoneInputProps, PhoneInputChangePayload } from '../../elements/phone-input';
+
+
diff --git a/packages/ui/src/elements/phone-input.tsx b/packages/ui/src/elements/phone-input.tsx
new file mode 100644
index 00000000..bbdd9094
--- /dev/null
+++ b/packages/ui/src/elements/phone-input.tsx
@@ -0,0 +1,148 @@
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+
+import InputFormat from 'input-format/react';
+import { AsYouType, CountryCode, getCountryCallingCode, parsePhoneNumberCharacter } from 'libphonenumber-js/core';
+import type { MetadataJson } from 'libphonenumber-js/types';
+
+import { Input } from '@o2s/ui/elements/input';
+
+import * as customMetadata from '../lib/phone/metadata.json';
+
+const metadata = customMetadata as MetadataJson;
+
+export type PhoneInputChangePayload = {
+    e164: string | null;
+    national: string | null;
+    isValid: boolean;
+    country?: string;
+};
+
+export interface PhoneInputProps
+    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'inputMode'> {
+    defaultCountry?: CountryCode; // e.g. 'PL' | 'DE' | 'GB'
+    display?: 'international' | 'national';
+    value?: string;
+    onChange?: (payload: PhoneInputChangePayload) => void;
+}
+
+const NAME = 'PhoneInput';
+
+export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
+    ({ defaultCountry = 'PL', display = 'international', value, onChange, ...props }, ref) => {
+        const [text, setText] = useState<string>(value ?? '');
+
+        const callingCode = getCountryCallingCode(defaultCountry, metadata as any);
+
+        const normalize = useCallback((raw?: string) => {
+            if (!raw) return '';
+            const trimmed = String(raw).trim();
+            // Convert international dialing prefix "00" to '+' like the demo does
+            return trimmed.replace(/^0{2}\s*/, '+');
+        }, []);
+
+        const format = useCallback(
+            (raw?: string) => {
+                const normalized = normalize(raw);
+                const asYouType = new AsYouType(defaultCountry, metadata as any);
+                let nextText = asYouType.input(normalized || '');
+                let template = asYouType.getTemplate();
+
+                if (normalized && normalized.length > 1 && normalized[0] !== '+') {
+                    nextText = `+${callingCode} ${nextText}`;
+                    template = `+${callingCode} xxx`;
+                }
+
+                return { text: nextText, template };
+            },
+            [defaultCountry, callingCode, normalize],
+        );
+
+        const computedValidity = useMemo(() => {
+            const asYouType = new AsYouType(undefined, metadata as any);
+            asYouType.input(normalize(text));
+            const number = asYouType.getNumber();
+            return !!number?.isValid();
+        }, [text, normalize]);
+
+        useEffect(() => {
+            if (value === undefined) return; // uncontrolled external value not provided
+            const formatted = format(value).text;
+            setText(formatted);
+            // emit change based on incoming value as well
+            const asYouType = new AsYouType(undefined, metadata as any);
+            asYouType.input(formatted);
+            const number = asYouType.getNumber();
+            onChange?.({
+                e164: number?.isPossible() ? number?.number ?? null : null,
+                national: number?.isPossible()
+                    ? display === 'international'
+                        ? number?.formatInternational({ v2: true }) ?? null
+                        : number?.formatNational({ v2: true }) ?? null
+                    : null,
+                isValid: !!number?.isValid(),
+                country: number?.country,
+            });
+        }, [value, display, onChange, format]);
+
+        return (
+            <InputFormat
+                format={format}
+                parse={parsePhoneNumberCharacter}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore input-format expects a different component type
+                inputComponent={Input}
+                ref={ref}
+                {...props}
+                aria-invalid={props['aria-invalid'] ?? (computedValidity ? undefined : true)}
+                value={text}
+                onPaste={(event) => {
+                    event.preventDefault();
+                    const raw = event.clipboardData.getData('text');
+                    const formatted = format(normalize(raw)).text;
+                    setText(formatted);
+
+                    const asYouType = new AsYouType(undefined, metadata as any);
+                    asYouType.input(formatted);
+                    const number = asYouType.getNumber();
+                    onChange?.({
+                        e164: number?.isPossible() ? number?.number ?? null : null,
+                        national: number?.isPossible()
+                            ? display === 'international'
+                                ? number?.formatInternational({ v2: true }) ?? null
+                                : number?.formatNational({ v2: true }) ?? null
+                            : null,
+                        isValid: !!number?.isValid(),
+                        country: number?.country,
+                    });
+                }}
+                onChange={(next) => {
+                    const nextText = String(next ?? '');
+                    setText(nextText);
+
+                    const asYouType = new AsYouType(undefined, metadata as any);
+                    asYouType.input(normalize(nextText));
+                    const number = asYouType.getNumber();
+                    onChange?.({
+                        e164: number?.isPossible() ? number?.number ?? null : null,
+                        national: number?.isPossible()
+                            ? display === 'international'
+                                ? number?.formatInternational({ v2: true }) ?? null
+                                : number?.formatNational({ v2: true }) ?? null
+                            : null,
+                        isValid: !!number?.isValid(),
+                        country: number?.country,
+                    });
+                }}
+                type="tel"
+                inputMode="tel"
+                name={props.name ?? NAME}
+            />
+        );
+    },
+);
+
+PhoneInput.displayName = NAME;
+
+export default PhoneInput;
+
+
diff --git a/packages/ui/src/lib/phone/metadata.json b/packages/ui/src/lib/phone/metadata.json
new file mode 100644
index 00000000..21d9aec8
--- /dev/null
+++ b/packages/ui/src/lib/phone/metadata.json
@@ -0,0 +1,43 @@
+{
+  "version": 4,
+  "country_calling_codes": {
+    "48": ["PL"],
+    "49": ["DE"],
+    "44": ["GB"]
+  },
+  "countries": {
+    "PL": [
+      "48",
+      "00",
+      "(?:6|8\\d\\d)\\d{7}|[1-9]\\d{6}(?:\\d{2})?|[26]\\d{5}",
+      [6, 7, 8, 9, 10],
+      [["(\\d{5})", "$1", ["19"]], ["(\\d{3})(\\d{3})", "$1 $2", ["11|20|64"]], ["(\\d{2})(\\d{2})(\\d{3})", "$1 $2 $3", ["(?:1[2-8]|2[2-69]|3[2-4]|4[1-468]|5[24-689]|6[1-3578]|7[14-7]|8[1-79]|9[145])1", "(?:1[2-8]|2[2-69]|3[2-4]|4[1-468]|5[24-689]|6[1-3578]|7[14-7]|8[1-79]|9[145])19"]], ["(\\d{3})(\\d{2})(\\d{2,3})", "$1 $2 $3", ["64"]], ["(\\d{3})(\\d{3})(\\d{3})", "$1 $2 $3", ["21|39|45|5[0137]|6[0469]|7[02389]|8(?:0[14]|8)"]], ["(\\d{2})(\\d{3})(\\d{2})(\\d{2})", "$1 $2 $3 $4", ["1[2-8]|[2-7]|8[1-79]|9[145]"]], ["(\\d{3})(\\d{3})(\\d{3,4})", "$1 $2 $3", ["8"]]],
+      0,
+      0,
+      0,
+      0,
+      0,
+      0,
+      [["47\\d{7}|(?:1[2-8]|2[2-69]|3[2-4]|4[1-468]|5[24-689]|6[1-3578]|7[14-7]|8[1-79]|9[145])(?:[02-9]\\d{6}|1(?:[0-8]\\d{5}|9\\d{3}(?:\\d{2})?))", [7, 9]], ["21(?:1(?:[145]\\d|3[1-5])|2[0-4]\\d)\\d{4}|(?:45|5[0137]|6[069]|7[2389]|88)\\d{7}", [9]], ["800\\d{6,7}", [9, 10]], ["70[01346-8]\\d{6}", [9]], 0, 0, ["804\\d{6}", [9]], ["64\\d{4,7}", [6, 7, 8, 9]], ["39\\d{7}", [9]], ["801\\d{6}", [9]]]
+    ],
+    "DE": [
+      "49",
+      "00",
+      "[2579]\\d{5,14}|49(?:[34]0|69|8\\d)\\d\\d?|49(?:37|49|60|7[089]|9\\d)\\d{1,3}|49(?:2[024-9]|3[2-689]|7[1-7])\\d{1,8}|(?:1|[368]\\d|4[0-8])\\d{3,13}|49(?:[015]\\d|2[13]|31|[46][1-8])\\d{1,9}",
+      [4,5,6,7,8,9,10,11,12,13,14,15],
+      [["(\\d{2})(\\d{3,13})","$1 $2",["3[02]|40|[68]9"],"0$1"],["(\\d{3})(\\d{3,12})","$1 $2",["2(?:0[1-389]|1[124]|2[18]|3[14])|3(?:[35-9][15]|4[015])|906|(?:2[4-9]|4[2-9]|[579][1-9]|[68][1-8])1","2(?:0[1-389]|12[0-8])|3(?:[35-9][15]|4[015])|906|2(?:[13][14]|2[18])|(?:2[4-9]|4[2-9]|[579][1-9]|[68][1-8])1"],"0$1"],["(\\d{4})(\\d{2,11})","$1 $2",["[24-6]|3(?:[3569][02-46-9]|4[2-4679]|7[2-467]|8[2-46-8])|70[2-8]|8(?:0[2-9]|[1-8])|90[7-9]|[79][1-9]","[24-6]|3(?:3(?:0[1-467]|2[127-9]|3[124578]|7[1257-9]|8[1256]|9[145])|4(?:2[135]|4[13578]|9[1346])|5(?:0[14]|2[1-3589]|6[1-4]|7[13468]|8[13568])|6(?:2[1-489]|3[124-6]|6[13]|7[12579]|8[1-356]|9[135])|7(?:2[1-7]|4[145]|6[1-5]|7[1-4])|8(?:21|3[1468]|6|7[1467]|8[136])|9(?:0[12479]|2[1358]|4[134679]|6[1-9]|7[136]|8[147]|9[1468]))|70[2-8]|8(?:0[2-9]|[1-8])|90[7-9]|[79][1-9]|3[68]4[1347]|3(?:47|60)[1356]|3(?:3[46]|46|5[49])[1246]|3[4579]3[1357]"],"0$1"],["(\\d{3})(\\d{4})","$1 $2",["138"],"0$1"],["(\\d{5})(\\d{2,10})","$1 $2",["3"],"0$1"],["(\\d{3})(\\d{5,11})","$1 $2",["181"],"0$1"],["(\\d{3})(\\d)(\\d{4,10})","$1 $2 $3",["1(?:3|80)|9"],"0$1"],["(\\d{3})(\\d{7,8})","$1 $2",["1[67]"],"0$1"],["(\\d{3})(\\d{7,12})","$1 $2",["8"],"0$1"],["(\\d{5})(\\d{6})","$1 $2",["185","1850","18500"],"0$1"],["(\\d{3})(\\d{4})(\\d{4})","$1 $2 $3",["7"],"0$1"],["(\\d{4})(\\d{7})","$1 $2",["18[68]"],"0$1"],["(\\d{5})(\\d{6})","$1 $2",["15[0568]"],"0$1"],["(\\d{4})(\\d{7})","$1 $2",["15[1279]"],"0$1"],["(\\d{3})(\\d{8})","$1 $2",["18"],"0$1"],["(\\d{3})(\\d{2})(\\d{7,8})","$1 $2 $3",["1(?:6[023]|7)"],"0$1"],["(\\d{4})(\\d{2})(\\d{7})","$1 $2 $3",["15[279]"],"0$1"],["(\\d{3})(\\d{2})(\\d{8})","$1 $2 $3",["15"],"0$1"]],
+      "0",
+      0,0,0,0,0,
+      [["32\\d{9,11}|49[1-6]\\d{10}|322\\d{6}|49[0-7]\\d{3,9}|(?:[34]0|[68]9)\\d{3,13}|(?:2(?:0[1-689]|[1-3569]\\d|4[0-8]|7[1-7]|8[0-7])|3(?:[3569]\\d|4[0-79]|7[1-7]|8[1-8])|4(?:1[02-9]|[2-48]\\d|5[0-6]|6[0-8]|7[0-79])|5(?:0[2-8]|[124-6]\\d|[38][0-8]|[79][0-7])|6(?:0[02-9]|[1-358]\\d|[47][0-8]|6[1-9])|7(?:0[2-8]|1[1-9]|[27][0-7]|3\\d|[4-6][0-8]|8[0-5]|9[013-7])|8(?:0[2-9]|1[0-79]|2\\d|3[0-46-9]|4[0-6]|5[013-9]|6[1-8]|7[0-8]|8[0-24-6])|9(?:0[6-9]|[1-4]\\d|[589][0-7]|6[0-8]|7[0-467]))\\d{3,12}",[5,6,7,8,9,10,11,12,13,14,15]],["15[0-25-9]\\d{8}|1(?:6[023]|7\\d)\\d{7,8}",[10,11]],["800\\d{7,12}",[10,11,12,13,14,15]],["(?:137[7-9]|900(?:[135]|9\\d))\\d{6}",[10,11]],["700\\d{8}",[11]],0,["18(?:1\\d{5,11}|[2-9]\\d{8})",[8,9,10,11,12,13,14]],["16(?:4\\d{1,10}|[89]\\d{1,11})",[4,5,6,7,8,9,10,11,12,13,14]],0,["180\\d{5,11}|13(?:7[1-6]\\d\\d|8)\\d{4}",[7,8,9,10,11,12,13,14]]]
+    ],
+    "GB": [
+      "44",
+      "00",
+      "7\\d{9}|1\\d{9,10}|2\\d{9,10}",
+      [10,11],
+      [["(\\d{5})(\\d{6})","$1 $2",["1"]],["(\\d{4})(\\d{6})","$1 $2",["1|2|7"]],["(\\d{3})(\\d{3})(\\d{4})","$1 $2 $3",["7"]]],
+      "0"
+    ]
+  }
+}
+
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 45bb7ce8..47f7e2aa 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -3,6 +3,9 @@
     "compilerOptions": {
         "outDir": "dist",
         "baseUrl": "./",
+        "jsx": "preserve",
+        "resolveJsonModule": true,
+        "types": ["react", "react-dom"],
         "paths": {
             "@o2s/ui/*": ["./src/*"],
             "@o2s/ui/elements/*": ["./src/elements/*"],