@dyrected/admin 2.0.1 → 2.4.0

package/src/components/ui/calendar.tsx

@@ -27,7 +27,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-white group/calendar p-4 [--cell-size:2.25rem] shadow-sm rounded-xl border border-border/40",
+        "dy-bg-white dy-group/calendar dy-p-4 [--cell-size:dy-2.25rem] dy-shadow-sm dy-rounded-xl dy-border dy-border-border/40",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -39,14 +39,14 @@ function Calendar({
         ...formatters,
       }}
       classNames={{
-        root: cn("w-fit", defaultClassNames.root),
+        root: cn("dy-w-fit", defaultClassNames.root),
         months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
+          "dy-relative dy-flex dy-flex-col dy-gap-4 md:dy-flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        month: cn("dy-flex dy-w-full dy-flex-col dy-gap-4", defaultClassNames.month),
         nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          "dy-absolute dy-inset-x-0 dy-top-0 dy-flex dy-w-full dy-items-center dy-justify-between dy-gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
@@ -60,66 +60,66 @@ function Calendar({
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size] mb-4",
+          "dy-flex dy-h-[--cell-size] dy-w-full dy-items-center dy-justify-center dy-px-[--cell-size] dy-mb-4",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          "dy-flex dy-h-[--cell-size] dy-w-full dy-items-center dy-justify-center dy-gap-1.5 dy-text-sm dy-font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          "has-focus:dy-border-ring dy-border-input dy-shadow-xs has-focus:dy-ring-ring/50 has-focus:dy-ring-[3px] dy-relative dy-rounded-md dy-border",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
-          "bg-popover absolute inset-0 opacity-0",
+          "dy-bg-popover dy-absolute dy-inset-0 dy-opacity-0",
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "select-none font-semibold text-lg tracking-tight",
+          "dy-select-none dy-font-semibold dy-text-lg dy-tracking-tight",
           captionLayout === "label"
-            ? "text-sm"
-            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+            ? "dy-text-sm"
+            : "[&>svg]:dy-text-muted-foreground dy-flex dy-h-8 dy-items-center dy-gap-1 dy-rounded-md dy-pl-2 dy-pr-1 dy-text-sm [&>svg]:dy-size-3.5",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
-        weekdays: cn("grid grid-cols-7 mb-2", defaultClassNames.weekdays),
+        weekdays: cn("dy-grid dy-grid-cols-7 dy-mb-2", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground text-center select-none text-[0.8rem] font-medium",
+          "dy-text-muted-foreground dy-text-center dy-select-none dy-text-[0.8rem] dy-font-medium",
           defaultClassNames.weekday
         ),
-        week: cn("grid grid-cols-7 w-full mt-1", defaultClassNames.week),
+        week: cn("dy-grid dy-grid-cols-7 dy-w-full dy-mt-1", defaultClassNames.week),
         week_number_header: cn(
-          "w-[--cell-size] select-none",
+          "dy-w-[--cell-size] dy-select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
+          "dy-text-muted-foreground dy-select-none dy-text-[0.8rem]",
           defaultClassNames.week_number
         ),
         day: cn(
-          "group/day relative flex items-center justify-center h-[--cell-size] w-full select-none p-0 text-center",
+          "dy-group/day dy-relative dy-flex dy-items-center dy-justify-center dy-h-[--cell-size] dy-w-full dy-select-none dy-p-0 dy-text-center",
           defaultClassNames.day
         ),
         range_start: cn(
-          "bg-primary text-primary-foreground rounded-l-md",
+          "dy-bg-primary dy-text-primary-foreground dy-rounded-l-md",
           defaultClassNames.range_start
         ),
-        range_middle: cn("bg-accent text-accent-foreground rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-primary text-primary-foreground rounded-r-md", defaultClassNames.range_end),
+        range_middle: cn("dy-bg-accent dy-text-accent-foreground dy-rounded-none", defaultClassNames.range_middle),
+        range_end: cn("dy-bg-primary dy-text-primary-foreground dy-rounded-r-md", defaultClassNames.range_end),
         today: cn(
-          "bg-accent/50 text-accent-foreground font-bold rounded-md",
+          "dy-bg-accent/50 dy-text-accent-foreground dy-font-bold dy-rounded-md",
           defaultClassNames.today
         ),
         outside: cn(
-          "text-muted-foreground/40 aria-selected:text-muted-foreground/40 opacity-50",
+          "dy-text-muted-foreground/40 aria-selected:dy-text-muted-foreground/40 dy-opacity-50",
           defaultClassNames.outside
         ),
         disabled: cn(
-          "text-muted-foreground opacity-50",
+          "dy-text-muted-foreground dy-opacity-50",
           defaultClassNames.disabled
         ),
-        hidden: cn("invisible", defaultClassNames.hidden),
+        hidden: cn("dy-invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
@@ -136,28 +136,28 @@ function Calendar({
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+              <ChevronLeftIcon className={cn("dy-size-4", className)} {...props} />
             )
           }
 
           if (orientation === "right") {
             return (
               <ChevronRightIcon
-                className={cn("size-4", className)}
+                className={cn("dy-size-4", className)}
                 {...props}
               />
             )
           }
 
           return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+            <ChevronDownIcon className={cn("dy-size-4", className)} {...props} />
           )
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props }) => {
           return (
             <td {...props}>
-              <div className="flex size-[--cell-size] items-center justify-center text-center">
+              <div className="dy-flex dy-size-[--cell-size] dy-items-center dy-justify-center dy-text-center">
                 {children}
               </div>
             </td>
@@ -197,13 +197,13 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "flex items-center justify-center h-[--cell-size] w-full min-w-[--cell-size] p-0 font-normal transition-all",
-        "hover:bg-accent hover:text-accent-foreground",
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:rounded-full data-[selected-single=true]:shadow-lg",
-        "data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-middle=true]:rounded-none",
-        "data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-start=true]:rounded-l-md",
-        "data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-end=true]:rounded-r-md",
-        "group-data-[focused=true]/day:ring-2 group-data-[focused=true]/day:ring-ring group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10",
+        "dy-flex dy-items-center dy-justify-center dy-h-[--cell-size] dy-w-full dy-min-w-[--cell-size] dy-p-0 dy-font-normal dy-transition-all",
+        "hover:dy-bg-accent hover:dy-text-accent-foreground",
+        "data-[selected-single=true]:dy-bg-primary data-[selected-single=true]:dy-text-primary-foreground data-[selected-single=true]:dy-rounded-full data-[selected-single=true]:dy-shadow-lg",
+        "data-[range-middle=true]:dy-bg-accent data-[range-middle=true]:dy-text-accent-foreground data-[range-middle=true]:dy-rounded-none",
+        "data-[range-start=true]:dy-bg-primary data-[range-start=true]:dy-text-primary-foreground data-[range-start=true]:dy-rounded-l-md",
+        "data-[range-end=true]:dy-bg-primary data-[range-end=true]:dy-text-primary-foreground data-[range-end=true]:dy-rounded-r-md",
+        "dy-group-data-[focused=true]/day:dy-ring-2 dy-group-data-[focused=true]/day:dy-ring-ring dy-group-data-[focused=true]/day:dy-relative dy-group-data-[focused=true]/day:dy-z-10",
         className
       )}
       {...props}

package/src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "dy-rounded-lg dy-border dy-bg-card dy-text-card-foreground dy-shadow-sm",
       className
     )}
     {...props}
@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("dy-flex dy-flex-col dy-space-y-1.5 dy-p-6", className)}
     {...props}
   />
 ))
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      "dy-text-2xl dy-font-semibold dy-leading-none dy-tracking-tight",
       className
     )}
     {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("dy-text-sm dy-text-muted-foreground", className)}
     {...props}
   />
 ))
@@ -60,7 +60,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn("dy-p-6 dy-pt-0", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"
 
@@ -70,7 +70,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn("dy-flex dy-items-center dy-p-6 dy-pt-0", className)}
     {...props}
   />
 ))

package/src/components/ui/checkbox.tsx

@@ -11,15 +11,15 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "dy-grid dy-place-content-center dy-peer dy-h-4 dy-w-4 dy-shrink-0 dy-rounded-sm dy-border dy-border-primary dy-ring-offset-background focus-visible:dy-outline-none focus-visible:dy-ring-2 focus-visible:dy-ring-ring focus-visible:dy-ring-offset-2 disabled:dy-cursor-not-allowed disabled:dy-opacity-50 data-[state=checked]:dy-bg-primary data-[state=checked]:dy-text-primary-foreground",
       className
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
-      className={cn("grid place-content-center text-current")}
+      className={cn("dy-grid dy-place-content-center dy-text-current")}
     >
-      <Check className="h-4 w-4" />
+      <Check className="dy-h-4 dy-w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))

package/src/components/ui/command.tsx

@@ -13,7 +13,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-popover-foreground",
+      "dy-flex dy-h-full dy-w-full dy-flex-col dy-overflow-hidden dy-rounded-md dy-bg-white dy-text-popover-foreground",
       className
     )}
     {...props}
@@ -24,8 +24,8 @@ Command.displayName = CommandPrimitive.displayName
 const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+      <DialogContent className="dy-overflow-hidden dy-p-0 dy-shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:dy-px-2 [&_[cmdk-group-heading]]:dy-font-medium [&_[cmdk-group-heading]]:dy-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:dy-pt-0 [&_[cmdk-group]]:dy-px-2 [&_[cmdk-input-wrapper]_svg]:dy-h-5 [&_[cmdk-input-wrapper]_svg]:dy-w-5 [&_[cmdk-input]]:dy-h-12 [&_[cmdk-item]]:dy-px-2 [&_[cmdk-item]]:dy-py-3 [&_[cmdk-item]_svg]:dy-h-5 [&_[cmdk-item]_svg]:dy-w-5">
           {children}
         </Command>
       </DialogContent>
@@ -37,12 +37,12 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <div className="dy-flex dy-items-center dy-border-b dy-px-3" cmdk-input-wrapper="">
+    <Search className="dy-mr-2 dy-h-4 dy-w-4 dy-shrink-0 dy-opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "dy-flex dy-h-11 dy-w-full dy-rounded-md dy-bg-transparent dy-py-3 dy-text-sm dy-outline-none placeholder:dy-text-muted-foreground disabled:dy-cursor-not-allowed disabled:dy-opacity-50",
         className
       )}
       {...props}
@@ -58,7 +58,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn("dy-max-h-[300px] dy-overflow-y-auto dy-overflow-x-hidden", className)}
     {...props}
   />
 ))
@@ -71,7 +71,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-center text-sm"
+    className="dy-py-6 dy-text-center dy-text-sm"
     {...props}
   />
 ))
@@ -85,7 +85,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "dy-overflow-hidden dy-p-1 dy-text-foreground [&_[cmdk-group-heading]]:dy-px-2 [&_[cmdk-group-heading]]:dy-py-1.5 [&_[cmdk-group-heading]]:dy-text-xs [&_[cmdk-group-heading]]:dy-font-medium [&_[cmdk-group-heading]]:dy-text-muted-foreground",
       className
     )}
     {...props}
@@ -100,7 +100,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
+    className={cn("dy--mx-1 dy-h-px dy-bg-border", className)}
     {...props}
   />
 ))
@@ -113,7 +113,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "dy-relative dy-flex dy-cursor-default dy-gap-2 dy-select-none dy-items-center dy-rounded-sm dy-px-2 dy-py-1.5 dy-text-sm dy-outline-none data-[disabled=true]:dy-pointer-events-none data-[selected='true']:dy-bg-accent data-[selected=true]:dy-text-accent-foreground data-[disabled=true]:dy-opacity-50 [&_svg]:dy-pointer-events-none [&_svg]:dy-size-4 [&_svg]:dy-shrink-0",
       className
     )}
     {...props}
@@ -129,7 +129,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "dy-ml-auto dy-text-xs dy-tracking-widest dy-text-muted-foreground",
         className
       )}
       {...props}

package/src/components/ui/data-table.tsx

@@ -88,8 +88,8 @@ export function DataTable<TData, TValue>({
   })
 
   return (
-    <div className="w-full space-y-4">
-      <div className="flex items-center gap-4">
+    <div className="dy-w-full dy-space-y-4">
+      <div className="dy-flex dy-items-center dy-gap-4">
         {searchKey && (
           <Input
             placeholder={`Search ${searchKey}...`}
@@ -97,11 +97,11 @@ export function DataTable<TData, TValue>({
             onChange={(event) =>
               table.getColumn(searchKey)?.setFilterValue(event.target.value)
             }
-            className="max-w-sm"
+            className="dy-max-w-sm"
           />
         )}
         {bulkActions && table.getFilteredSelectedRowModel().rows.length > 0 && (
-          <div className="flex items-center gap-2 animate-in slide-in-from-left-2">
+          <div className="dy-flex dy-items-center dy-gap-2 dy-animate-in dy-slide-in-from-left-2">
             {bulkActions(
               table
                 .getFilteredSelectedRowModel()
@@ -111,8 +111,8 @@ export function DataTable<TData, TValue>({
         )}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="sm" className="ml-auto flex h-8 gap-2">
-              <Settings2 className="h-4 w-4" />
+            <Button variant="outline" size="sm" className="dy-ml-auto dy-flex dy-h-8 dy-gap-2">
+              <Settings2 className="dy-h-4 dy-w-4" />
               View
             </Button>
           </DropdownMenuTrigger>
@@ -124,7 +124,7 @@ export function DataTable<TData, TValue>({
                 return (
                   <DropdownMenuCheckboxItem
                     key={column.id}
-                    className="capitalize"
+                    className="dy-capitalize"
                     checked={column.getIsVisible()}
                     onCheckedChange={(value) => column.toggleVisibility(!!value)}
                   >
@@ -135,7 +135,7 @@ export function DataTable<TData, TValue>({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="overflow-hidden">
+      <div className="dy-overflow-hidden">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -155,16 +155,16 @@ export function DataTable<TData, TValue>({
               </TableRow>
             ))}
           </TableHeader>
-          <TableBody className="border-t border-border/40">
+          <TableBody className="dy-border-t dy-border-border/40">
             {table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => (
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && "selected"}
-                  className="border-none even:bg-primary/[0.03] hover:bg-primary/[0.06] transition-colors duration-200"
+                  className="dy-border-none even:dy-bg-primary/[0.03] hover:dy-bg-primary/[0.06] dy-transition-colors dy-duration-200"
                 >
                   {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id} className="py-4 px-4 border-none first:pl-4 last:pr-4">
+                    <TableCell key={cell.id} className="dy-py-4 dy-px-4 dy-border-none first:dy-pl-4 last:dy-pr-4">
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext()
@@ -177,7 +177,7 @@ export function DataTable<TData, TValue>({
               <TableRow>
                 <TableCell
                   colSpan={columns.length}
-                  className="h-24 text-center"
+                  className="dy-h-24 dy-text-center"
                 >
                   No results.
                 </TableCell>
@@ -186,21 +186,21 @@ export function DataTable<TData, TValue>({
           </TableBody>
         </Table>
       </div>
-      <div className="flex items-center justify-between px-2">
-        <div className="flex-1 text-sm text-muted-foreground">
+      <div className="dy-flex dy-items-center dy-justify-between dy-px-2">
+        <div className="dy-flex-1 dy-text-sm dy-text-muted-foreground">
           {table.getFilteredSelectedRowModel().rows.length} of{" "}
           {table.getFilteredRowModel().rows.length} row(s) selected.
         </div>
-        <div className="flex items-center space-x-2">
+        <div className="dy-flex dy-items-center dy-space-x-2">
           <Button
             variant="outline"
             size="sm"
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
-            <ChevronLeft className="h-4 w-4" />
+            <ChevronLeft className="dy-h-4 dy-w-4" />
           </Button>
-          <span className="text-sm font-medium">
+          <span className="dy-text-sm dy-font-medium">
             Page {table.getState().pagination.pageIndex + 1} of{" "}
             {table.getPageCount()}
           </span>
@@ -210,7 +210,7 @@ export function DataTable<TData, TValue>({
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
-            <ChevronRight className="h-4 w-4" />
+            <ChevronRight className="dy-h-4 dy-w-4" />
           </Button>
         </div>
       </div>

package/src/components/ui/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "dy-fixed dy-inset-0 dy-z-50 dy-bg-black/40 dy-backdrop-blur-[2px] data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0",
       className
     )}
     {...props}
@@ -38,15 +38,15 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
+        "dy-fixed dy-left-[50%] dy-top-[50%] dy-z-50 dy-grid dy-w-full dy-max-w-lg dy-translate-x-[-50%] dy-translate-y-[-50%] dy-gap-4 dy-border dy-bg-white dy-p-6 dy-shadow-2xl dy-duration-200 data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[state=closed]:dy-slide-out-to-left-1/2 data-[state=closed]:dy-slide-out-to-top-[48%] data-[state=open]:dy-slide-in-from-left-1/2 data-[state=open]:dy-slide-in-from-top-[48%] sm:dy-rounded-xl",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
+      <DialogPrimitive.Close className="dy-absolute dy-right-4 dy-top-4 dy-rounded-sm dy-opacity-70 dy-ring-offset-background dy-transition-opacity hover:dy-opacity-100 focus:dy-outline-none focus:dy-ring-2 focus:dy-ring-ring focus:dy-ring-offset-2 disabled:dy-pointer-events-none data-[state=open]:dy-bg-accent data-[state=open]:dy-text-muted-foreground">
+        <X className="dy-h-4 dy-w-4" />
+        <span className="dy-sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
@@ -59,7 +59,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      "dy-flex dy-flex-col dy-space-y-1.5 dy-text-center sm:dy-text-left",
       className
     )}
     {...props}
@@ -73,7 +73,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "dy-flex dy-flex-col-reverse sm:dy-flex-row sm:dy-justify-end sm:dy-space-x-2",
       className
     )}
     {...props}
@@ -88,7 +88,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "dy-text-lg dy-font-semibold dy-leading-none dy-tracking-tight",
       className
     )}
     {...props}
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("dy-text-sm dy-text-muted-foreground", className)}
     {...props}
   />
 ))

package/src/components/ui/dropdown-menu.tsx

@@ -27,14 +27,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
+      "dy-flex dy-cursor-default dy-select-none dy-items-center dy-gap-2 dy-rounded-sm dy-px-2 dy-py-1.5 dy-text-sm dy-outline-none focus:dy-bg-accent data-[state=open]:dy-bg-accent [&_svg]:dy-pointer-events-none [&_svg]:dy-size-4 [&_svg]:dy-shrink-0",
+      inset && "dy-pl-8",
       className
     )}
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto" />
+    <ChevronRight className="dy-ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      "dy-z-50 dy-min-w-[8rem] dy-overflow-hidden dy-rounded-md dy-border dy-bg-popover dy-p-1 dy-text-popover-foreground dy-shadow-lg data-[state=open]:dy-animate-in data-[state=closed]:dy-animate-out data-[state=closed]:dy-fade-out-0 data-[state=open]:dy-fade-in-0 data-[state=closed]:dy-zoom-out-95 data-[state=open]:dy-zoom-in-95 data-[side=bottom]:dy-slide-in-from-top-2 data-[side=left]:dy-slide-in-from-right-2 data-[side=right]:dy-slide-in-from-left-2 data-[side=top]:dy-slide-in-from-bottom-2 dy-origin-[--radix-dropdown-menu-content-transform-origin]",
       className
     )}
     {...props}
@@ -83,8 +83,8 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
+      "dy-relative dy-flex dy-cursor-default dy-select-none dy-items-center dy-gap-2 dy-rounded-sm dy-px-2 dy-py-1.5 dy-text-sm dy-outline-none dy-transition-colors focus:dy-bg-accent focus:dy-text-accent-foreground data-[disabled]:dy-pointer-events-none data-[disabled]:dy-opacity-50 [&_svg]:dy-pointer-events-none [&_svg]:dy-size-4 [&_svg]:dy-shrink-0",
+      inset && "dy-pl-8",
       className
     )}
     {...props}
@@ -99,15 +99,15 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "dy-relative dy-flex dy-cursor-default dy-select-none dy-items-center dy-rounded-sm dy-py-1.5 dy-pl-8 dy-pr-2 dy-text-sm dy-outline-none dy-transition-colors focus:dy-bg-accent focus:dy-text-accent-foreground data-[disabled]:dy-pointer-events-none data-[disabled]:dy-opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="dy-absolute dy-left-2 dy-flex dy-h-3.5 dy-w-3.5 dy-items-center dy-justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="dy-h-4 dy-w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -123,14 +123,14 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "dy-relative dy-flex dy-cursor-default dy-select-none dy-items-center dy-rounded-sm dy-py-1.5 dy-pl-8 dy-pr-2 dy-text-sm dy-outline-none dy-transition-colors focus:dy-bg-accent focus:dy-text-accent-foreground data-[disabled]:dy-pointer-events-none data-[disabled]:dy-opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="dy-absolute dy-left-2 dy-flex dy-h-3.5 dy-w-3.5 dy-items-center dy-justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <Circle className="dy-h-2 dy-w-2 dy-fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -147,8 +147,8 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      "dy-px-2 dy-py-1.5 dy-text-sm dy-font-semibold",
+      inset && "dy-pl-8",
       className
     )}
     {...props}
@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("dy--mx-1 dy-my-1 dy-h-px dy-bg-muted", className)}
     {...props}
   />
 ))
@@ -174,7 +174,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn("dy-ml-auto dy-text-xs dy-tracking-widest dy-opacity-60", className)}
       {...props}
     />
   )