From 33452aef4bee1d9fc6bf1fb07b7c5557d079e33b Mon Sep 17 00:00:00 2001
From: "f.shuaib" <f.shuaib@masarat.ly>
Date: Sun, 22 Oct 2023 19:49:12 +0200
Subject: [PATCH] change text direction from staticly left to be justifing
 parent element, which will be right if the direction is rtl and left if the
 direction is ltr

---
 apps/www/.vitepress/theme/layout/MainLayout.vue  |  2 +-
 .../src/content/docs/components/date-picker.md   |  2 +-
 .../dashboard/components/DateRangePicker.vue     |  2 +-
 .../examples/forms/components/AccountForm.vue    |  2 +-
 .../src/examples/forms/components/SidebarNav.vue |  2 +-
 .../playground/components/PresetShare.vue        |  2 +-
 .../registry/default/example/DatePickerDemo.vue  |  2 +-
 .../default/example/DatePickerWithPresets.vue    |  2 +-
 .../default/example/DatePickerWithRange.vue      |  2 +-
 .../registry/default/example/TypographyDemo.vue  | 16 ++++++++--------
 .../registry/default/example/TypographyTable.vue | 16 ++++++++--------
 .../ui/alert-dialog/AlertDialogHeader.vue        |  2 +-
 .../registry/default/ui/dialog/DialogHeader.vue  |  2 +-
 .../lib/registry/default/ui/form/FormLabel.vue   |  2 +-
 .../src/lib/registry/default/ui/label/Label.vue  |  2 +-
 .../registry/default/ui/sheet/SheetHeader.vue    |  2 +-
 .../lib/registry/default/ui/table/TableHead.vue  |  2 +-
 .../registry/new-york/example/DatePickerDemo.vue |  2 +-
 .../new-york/example/DatePickerWithPresets.vue   |  2 +-
 .../new-york/example/DatePickerWithRange.vue     |  2 +-
 .../registry/new-york/example/TypographyDemo.vue | 16 ++++++++--------
 .../new-york/example/TypographyTable.vue         | 16 ++++++++--------
 .../ui/alert-dialog/AlertDialogHeader.vue        |  2 +-
 .../registry/new-york/ui/dialog/DialogHeader.vue |  2 +-
 .../lib/registry/new-york/ui/form/FormLabel.vue  |  2 +-
 .../src/lib/registry/new-york/ui/label/Label.vue |  2 +-
 .../registry/new-york/ui/sheet/SheetHeader.vue   |  2 +-
 .../lib/registry/new-york/ui/table/TableHead.vue |  2 +-
 .../registry/styles/default/alert-dialog.json    |  2 +-
 .../public/registry/styles/default/dialog.json   |  2 +-
 .../src/public/registry/styles/default/form.json |  2 +-
 .../public/registry/styles/default/label.json    |  2 +-
 .../public/registry/styles/default/sheet.json    |  2 +-
 .../public/registry/styles/default/table.json    |  2 +-
 .../registry/styles/new-york/alert-dialog.json   |  2 +-
 .../public/registry/styles/new-york/dialog.json  |  2 +-
 .../public/registry/styles/new-york/form.json    |  2 +-
 .../public/registry/styles/new-york/label.json   |  2 +-
 .../public/registry/styles/new-york/sheet.json   |  2 +-
 .../public/registry/styles/new-york/table.json   |  2 +-
 .../ui/alert-dialog/AlertDialogHeader.vue        |  2 +-
 41 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 533e367b..84234c6c 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -171,7 +171,7 @@ watch(() => $route.path, (n) => {
 
     <footer class="py-6 md:px-8 md:py-0">
       <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-        <div class="text-center text-sm leading-loose text-muted-foreground md:text-left">
+        <div class="text-center text-sm leading-loose text-muted-foreground md:text-justify">
           <span class="inline-block">
             Built and designed by
             <a
diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index 43aef149..8edc059c 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -38,7 +38,7 @@ const date = ref<Date>()
       <Button
         :variant="'outline'"
         :class="cn(
-          'w-[280px] justify-start text-left font-normal',
+          'w-[280px] justify-start text-justify font-normal',
           !date && 'text-muted-foreground',
         )"
       >
diff --git a/apps/www/src/examples/dashboard/components/DateRangePicker.vue b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
index 1951070a..da480f80 100644
--- a/apps/www/src/examples/dashboard/components/DateRangePicker.vue
+++ b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
@@ -26,7 +26,7 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[260px] justify-start text-left font-normal',
+            'w-[260px] justify-start text-justify font-normal',
             !date && 'text-muted-foreground',
           )"
         >
diff --git a/apps/www/src/examples/forms/components/AccountForm.vue b/apps/www/src/examples/forms/components/AccountForm.vue
index 43d21c13..35eddada 100644
--- a/apps/www/src/examples/forms/components/AccountForm.vue
+++ b/apps/www/src/examples/forms/components/AccountForm.vue
@@ -99,7 +99,7 @@ async function onSubmit(values: any) {
             <FormControl>
               <Button
                 variant="outline" :class="cn(
-                  'w-[280px] pl-3 text-left font-normal',
+                  'w-[280px] pl-3 text-justify font-normal',
                   !value && 'text-muted-foreground',
                 )"
               >
diff --git a/apps/www/src/examples/forms/components/SidebarNav.vue b/apps/www/src/examples/forms/components/SidebarNav.vue
index ba79807a..78d0a630 100644
--- a/apps/www/src/examples/forms/components/SidebarNav.vue
+++ b/apps/www/src/examples/forms/components/SidebarNav.vue
@@ -43,7 +43,7 @@ const sidebarNavItems: Item[] = [
       :href="item.href"
       variant="ghost"
       :class="cn(
-        'w-full text-left justify-start',
+        'w-full text-justify justify-start',
         $route.path === `${item.href}.html` && 'bg-muted hover:bg-muted',
       )"
     >
diff --git a/apps/www/src/examples/playground/components/PresetShare.vue b/apps/www/src/examples/playground/components/PresetShare.vue
index fc839dfd..2bc932b9 100644
--- a/apps/www/src/examples/playground/components/PresetShare.vue
+++ b/apps/www/src/examples/playground/components/PresetShare.vue
@@ -19,7 +19,7 @@ import {
       </Button>
     </PopoverTrigger>
     <PopoverContent align="end" class="w-[520px]">
-      <div class="flex flex-col space-y-2 text-center sm:text-left">
+      <div class="flex flex-col space-y-2 text-center sm:text-justify">
         <h3 class="text-lg font-semibold">
           Share preset
         </h3>
diff --git a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
index 18334e63..d4edb38b 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
@@ -21,7 +21,7 @@ const date = ref<Date>()
       <Button
         :variant="'outline'"
         :class="cn(
-          'w-[280px] justify-start text-left font-normal',
+          'w-[280px] justify-start text-justify font-normal',
           !date && 'text-muted-foreground',
         )"
       >
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
index c45446f8..8fb05356 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
@@ -28,7 +28,7 @@ const date = ref<Date>()
       <Button
         variant="outline"
         :class="cn(
-          'w-[280px] justify-start text-left font-normal',
+          'w-[280px] justify-start text-justify font-normal',
           !date && 'text-muted-foreground',
         )"
       >
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
index b892d3d8..a61c7851 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
@@ -26,7 +26,7 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[300px] justify-start text-left font-normal',
+            'w-[300px] justify-start text-justify font-normal',
             !date && 'text-muted-foreground',
           )"
         >
diff --git a/apps/www/src/lib/registry/default/example/TypographyDemo.vue b/apps/www/src/lib/registry/default/example/TypographyDemo.vue
index 55020f33..b6f880c5 100644
--- a/apps/www/src/lib/registry/default/example/TypographyDemo.vue
+++ b/apps/www/src/lib/registry/default/example/TypographyDemo.vue
@@ -71,12 +71,12 @@
         <thead>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <th
-              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               King's Treasury
             </th>
             <th
-              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               People's happiness
             </th>
@@ -85,36 +85,36 @@
         <tbody>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Empty
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Overflowing
             </td>
           </tr>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Modest
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Satisfied
             </td>
           </tr>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Full
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Ecstatic
             </td>
diff --git a/apps/www/src/lib/registry/default/example/TypographyTable.vue b/apps/www/src/lib/registry/default/example/TypographyTable.vue
index 87609006..33539d50 100644
--- a/apps/www/src/lib/registry/default/example/TypographyTable.vue
+++ b/apps/www/src/lib/registry/default/example/TypographyTable.vue
@@ -4,12 +4,12 @@
       <thead>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <th
-            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             King's Treasury
           </th>
           <th
-            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             People's happiness
           </th>
@@ -18,36 +18,36 @@
       <tbody>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Empty
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Overflowing
           </td>
         </tr>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Modest
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Satisfied
           </td>
         </tr>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Full
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Ecstatic
           </td>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
index a350b718..4c70268a 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
@@ -11,7 +11,7 @@ const props = defineProps({
 
 <template>
   <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
index ad3340bd..766673d0 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
@@ -10,7 +10,7 @@ const props = defineProps<DialogHeaderProps>()
 
 <template>
   <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue b/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
index a85dbc09..ac54603d 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
@@ -16,7 +16,7 @@ const { class: className, ...rest } = useAttrs()
 <template>
   <Label
     :class="cn(
-      'block text-sm tracking-tight font-medium text-foreground text-left',
+      'block text-sm tracking-tight font-medium text-foreground text-justify',
       error && 'text-destructive',
       className ?? '',
     )"
diff --git a/apps/www/src/lib/registry/default/ui/label/Label.vue b/apps/www/src/lib/registry/default/ui/label/Label.vue
index e44d139e..b95eb2c0 100644
--- a/apps/www/src/lib/registry/default/ui/label/Label.vue
+++ b/apps/www/src/lib/registry/default/ui/label/Label.vue
@@ -10,7 +10,7 @@ const props = defineProps<LabelProps & { class?: string }>()
     v-bind="props"
     :class="
       cn(
-        'block text-sm tracking-tight font-medium text-foreground text-left',
+        'block text-sm tracking-tight font-medium text-foreground text-justify',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
index d2eb9b23..ffbfb70c 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
@@ -7,7 +7,7 @@ const props = defineProps<{ class?: string }>()
 <template>
   <div
     :class="
-      cn('flex flex-col space-y-2 text-center sm:text-left', props.class)
+      cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)
     "
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/table/TableHead.vue b/apps/www/src/lib/registry/default/ui/table/TableHead.vue
index 3f1aa5b2..feb1653c 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableHead.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableHead.vue
@@ -5,7 +5,7 @@ const props = defineProps<{ class?: string }>()
 </script>
 
 <template>
-  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+  <th :class="cn('h-12 px-4 text-justify align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
     <slot />
   </th>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
index 685f17cb..b73ef750 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
@@ -21,7 +21,7 @@ const date = ref<Date>()
       <Button
         :variant="'outline'"
         :class="cn(
-          'w-[280px] justify-start text-left font-normal',
+          'w-[280px] justify-start text-justify font-normal',
           !date && 'text-muted-foreground',
         )"
       >
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
index 78cd4321..2dea041c 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
@@ -28,7 +28,7 @@ const date = ref<Date>()
       <Button
         variant="outline"
         :class="cn(
-          'w-[280px] justify-start text-left font-normal',
+          'w-[280px] justify-start text-justify font-normal',
           !date && 'text-muted-foreground',
         )"
       >
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
index 2d6c7784..97f998d9 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
@@ -26,7 +26,7 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[300px] justify-start text-left font-normal',
+            'w-[300px] justify-start text-justify font-normal',
             !date && 'text-muted-foreground',
           )"
         >
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue b/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue
index 55020f33..b6f880c5 100644
--- a/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue
@@ -71,12 +71,12 @@
         <thead>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <th
-              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               King's Treasury
             </th>
             <th
-              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               People's happiness
             </th>
@@ -85,36 +85,36 @@
         <tbody>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Empty
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Overflowing
             </td>
           </tr>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Modest
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Satisfied
             </td>
           </tr>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Full
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Ecstatic
             </td>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyTable.vue b/apps/www/src/lib/registry/new-york/example/TypographyTable.vue
index 87609006..33539d50 100644
--- a/apps/www/src/lib/registry/new-york/example/TypographyTable.vue
+++ b/apps/www/src/lib/registry/new-york/example/TypographyTable.vue
@@ -4,12 +4,12 @@
       <thead>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <th
-            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             King's Treasury
           </th>
           <th
-            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             People's happiness
           </th>
@@ -18,36 +18,36 @@
       <tbody>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Empty
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Overflowing
           </td>
         </tr>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Modest
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Satisfied
           </td>
         </tr>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Full
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-justify [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Ecstatic
           </td>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
index a350b718..4c70268a 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
@@ -11,7 +11,7 @@ const props = defineProps({
 
 <template>
   <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
index ad3340bd..766673d0 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
@@ -10,7 +10,7 @@ const props = defineProps<DialogHeaderProps>()
 
 <template>
   <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue b/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
index 84f95ae4..9de9ed1d 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormLabel.vue
@@ -11,7 +11,7 @@ const { error, formItemId } = useFormField()
 <template>
   <Label
     :class="cn(
-      'block text-sm tracking-tight font-medium text-foreground text-left',
+      'block text-sm tracking-tight font-medium text-foreground text-justify',
       error && 'text-destructive',
       $attrs.class ?? '',
     )"
diff --git a/apps/www/src/lib/registry/new-york/ui/label/Label.vue b/apps/www/src/lib/registry/new-york/ui/label/Label.vue
index e44d139e..b95eb2c0 100644
--- a/apps/www/src/lib/registry/new-york/ui/label/Label.vue
+++ b/apps/www/src/lib/registry/new-york/ui/label/Label.vue
@@ -10,7 +10,7 @@ const props = defineProps<LabelProps & { class?: string }>()
     v-bind="props"
     :class="
       cn(
-        'block text-sm tracking-tight font-medium text-foreground text-left',
+        'block text-sm tracking-tight font-medium text-foreground text-justify',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
index d2eb9b23..ffbfb70c 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
@@ -7,7 +7,7 @@ const props = defineProps<{ class?: string }>()
 <template>
   <div
     :class="
-      cn('flex flex-col space-y-2 text-center sm:text-left', props.class)
+      cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)
     "
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
index c5528062..2ad1e394 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
@@ -5,7 +5,7 @@ const props = defineProps<{ class?: string }>()
 </script>
 
 <template>
-  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)">
+  <th :class="cn('h-10 px-2 text-justify align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)">
     <slot />
   </th>
 </template>
diff --git a/apps/www/src/public/registry/styles/default/alert-dialog.json b/apps/www/src/public/registry/styles/default/alert-dialog.json
index cb6830f7..107ee26b 100644
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/default/alert-dialog.json
@@ -34,7 +34,7 @@
     },
     {
       "name": "AlertDialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "AlertDialogTitle.vue",
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index 7ec67c55..b47bf161 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -25,7 +25,7 @@
     },
     {
       "name": "DialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n  class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n  class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "DialogTitle.vue",
diff --git a/apps/www/src/public/registry/styles/default/form.json b/apps/www/src/public/registry/styles/default/form.json
index 70d6a933..dd59c384 100644
--- a/apps/www/src/public/registry/styles/default/form.json
+++ b/apps/www/src/public/registry/styles/default/form.json
@@ -24,7 +24,7 @@
     },
     {
       "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { useAttrs } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      'block text-sm tracking-tight font-medium text-foreground text-left',\n      error && 'text-destructive',\n      className ?? '',\n    )\"\n    :for=\"formItemId\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { useAttrs } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      'block text-sm tracking-tight font-medium text-foreground text-justify',\n      error && 'text-destructive',\n      className ?? '',\n    )\"\n    :for=\"formItemId\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </Label>\n</template>\n"
     },
     {
       "name": "FormMessage.vue",
diff --git a/apps/www/src/public/registry/styles/default/label.json b/apps/www/src/public/registry/styles/default/label.json
index ce93da47..77337cb8 100644
--- a/apps/www/src/public/registry/styles/default/label.json
+++ b/apps/www/src/public/registry/styles/default/label.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Label.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n  <Label\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'block text-sm tracking-tight font-medium text-foreground text-left',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n  <Label\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'block text-sm tracking-tight font-medium text-foreground text-justify',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/sheet.json b/apps/www/src/public/registry/styles/default/sheet.json
index 6d6ce4ea..0e202fa7 100644
--- a/apps/www/src/public/registry/styles/default/sheet.json
+++ b/apps/www/src/public/registry/styles/default/sheet.json
@@ -29,7 +29,7 @@
     },
     {
       "name": "SheetHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "SheetTitle.vue",
diff --git a/apps/www/src/public/registry/styles/default/table.json b/apps/www/src/public/registry/styles/default/table.json
index fb0d4341..e6582f58 100644
--- a/apps/www/src/public/registry/styles/default/table.json
+++ b/apps/www/src/public/registry/styles/default/table.json
@@ -31,7 +31,7 @@
     },
     {
       "name": "TableHead.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-justify align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n"
     },
     {
       "name": "TableHeader.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/alert-dialog.json b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
index 2cf70dc1..f995f4fe 100644
--- a/apps/www/src/public/registry/styles/new-york/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
@@ -34,7 +34,7 @@
     },
     {
       "name": "AlertDialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "AlertDialogTitle.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
index b283bc71..028796a2 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/dialog.json
@@ -25,7 +25,7 @@
     },
     {
       "name": "DialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n  class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n  class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "DialogTitle.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/form.json b/apps/www/src/public/registry/styles/new-york/form.json
index 61e69a56..420c489a 100644
--- a/apps/www/src/public/registry/styles/new-york/form.json
+++ b/apps/www/src/public/registry/styles/new-york/form.json
@@ -24,7 +24,7 @@
     },
     {
       "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      'block text-sm tracking-tight font-medium text-foreground text-left',\n      error && 'text-destructive',\n      $attrs.class ?? '',\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport { Label, type LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps>()\n\nconst { error, formItemId } = useFormField()\n</script>\n\n<template>\n  <Label\n    :class=\"cn(\n      'block text-sm tracking-tight font-medium text-foreground text-justify',\n      error && 'text-destructive',\n      $attrs.class ?? '',\n    )\"\n    :for=\"formItemId\"\n  >\n    <slot />\n  </Label>\n</template>\n"
     },
     {
       "name": "FormMessage.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/label.json b/apps/www/src/public/registry/styles/new-york/label.json
index ce93da47..77337cb8 100644
--- a/apps/www/src/public/registry/styles/new-york/label.json
+++ b/apps/www/src/public/registry/styles/new-york/label.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Label.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n  <Label\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'block text-sm tracking-tight font-medium text-foreground text-left',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n  <Label\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'block text-sm tracking-tight font-medium text-foreground text-justify',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/sheet.json b/apps/www/src/public/registry/styles/new-york/sheet.json
index d038fd47..aff4c3d2 100644
--- a/apps/www/src/public/registry/styles/new-york/sheet.json
+++ b/apps/www/src/public/registry/styles/new-york/sheet.json
@@ -29,7 +29,7 @@
     },
     {
       "name": "SheetHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "SheetTitle.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/table.json b/apps/www/src/public/registry/styles/new-york/table.json
index efaf66a6..f7598dc3 100644
--- a/apps/www/src/public/registry/styles/new-york/table.json
+++ b/apps/www/src/public/registry/styles/new-york/table.json
@@ -31,7 +31,7 @@
     },
     {
       "name": "TableHead.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <th :class=\"cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)\">\n    <slot />\n  </th>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <th :class=\"cn('h-10 px-2 text-justify align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)\">\n    <slot />\n  </th>\n</template>\n"
     },
     {
       "name": "TableHeader.vue",
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogHeader.vue b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogHeader.vue
index a350b718..4c70268a 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogHeader.vue
+++ b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -11,7 +11,7 @@ const props = defineProps({
 
 <template>
   <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col space-y-2 text-center sm:text-justify', props.class)"
   >
     <slot />
   </div>