From 9f823912edacf84004d3c4baff72800663219803 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Wed, 17 Sep 2025 09:36:08 +0100
Subject: [PATCH 1/5] Add size option to fieldtypes

---
 resources/js/components/fieldtypes/ButtonGroupFieldtype.vue | 1 +
 resources/js/components/fieldtypes/SelectFieldtype.vue      | 1 +
 resources/js/components/fieldtypes/TextFieldtype.vue        | 1 +
 resources/js/components/fieldtypes/ToggleFieldtype.vue      | 1 +
 4 files changed, 4 insertions(+)

diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index 36e89887648..f8414adb91c 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -4,6 +4,7 @@
             v-for="(option, $index) in options"
             ref="button"
             :disabled="config.disabled"
+            :size="config.size"
             :key="$index"
             :name="name"
             :read-only="isReadOnly"
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 1c8ace9d27f..5bef705ef8f 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -5,6 +5,7 @@
         :disabled="config.disabled"
         :label-html="config.label_html"
         :max-selections="config.max_items"
+        :size="config.size"
         :model-value="value"
         :multiple="config.multiple"
         :options="options"
diff --git a/resources/js/components/fieldtypes/TextFieldtype.vue b/resources/js/components/fieldtypes/TextFieldtype.vue
index de407d0987e..464d1c14cf9 100644
--- a/resources/js/components/fieldtypes/TextFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextFieldtype.vue
@@ -7,6 +7,7 @@
         :autocomplete="config.autocomplete"
         :autoselect="config.autoselect"
         :type="config.input_type"
+        :size="config.size"
         :read-only="isReadOnly"
         :prepend="__(config.prepend)"
         :append="__(config.append)"
diff --git a/resources/js/components/fieldtypes/ToggleFieldtype.vue b/resources/js/components/fieldtypes/ToggleFieldtype.vue
index a92bfa7bb8c..0faba9f5d64 100644
--- a/resources/js/components/fieldtypes/ToggleFieldtype.vue
+++ b/resources/js/components/fieldtypes/ToggleFieldtype.vue
@@ -4,6 +4,7 @@
             <Switch
                 @update:model-value="update"
                 :disabled="config.disabled || isReadOnly"
+                :size="config.size"
                 :id="fieldId"
                 :model-value="value"
                 :read-only="isReadOnly"

From 3bc0a16e11513a3c0b958ef6ca0a5aa9d3695819 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 19 Sep 2025 16:16:36 +0100
Subject: [PATCH 2/5] WIP

---
 resources/js/components/fieldtypes/ButtonGroupFieldtype.vue | 1 -
 resources/js/components/fieldtypes/SelectFieldtype.vue      | 1 -
 resources/js/components/fieldtypes/TextFieldtype.vue        | 5 ++++-
 resources/js/components/fieldtypes/ToggleFieldtype.vue      | 1 -
 resources/js/components/ui/Publish/FieldsProvider.vue       | 4 ++++
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index f8414adb91c..36e89887648 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -4,7 +4,6 @@
             v-for="(option, $index) in options"
             ref="button"
             :disabled="config.disabled"
-            :size="config.size"
             :key="$index"
             :name="name"
             :read-only="isReadOnly"
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 5bef705ef8f..1c8ace9d27f 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -5,7 +5,6 @@
         :disabled="config.disabled"
         :label-html="config.label_html"
         :max-selections="config.max_items"
-        :size="config.size"
         :model-value="value"
         :multiple="config.multiple"
         :options="options"
diff --git a/resources/js/components/fieldtypes/TextFieldtype.vue b/resources/js/components/fieldtypes/TextFieldtype.vue
index 464d1c14cf9..a522c9a27a3 100644
--- a/resources/js/components/fieldtypes/TextFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextFieldtype.vue
@@ -7,7 +7,7 @@
         :autocomplete="config.autocomplete"
         :autoselect="config.autoselect"
         :type="config.input_type"
-        :size="config.size"
+        :size="size"
         :read-only="isReadOnly"
         :prepend="__(config.prepend)"
         :append="__(config.append)"
@@ -26,6 +26,9 @@
 import Fieldtype from '@/components/fieldtypes/fieldtype.js';
 import { Input } from '@/components/ui';
 import { computed } from 'vue';
+import { injectFieldsContext } from './../ui/Publish/FieldsProvider.vue';
+
+const { size } = injectFieldsContext();
 
 const emit = defineEmits(Fieldtype.emits);
 const props = defineProps(Fieldtype.props);
diff --git a/resources/js/components/fieldtypes/ToggleFieldtype.vue b/resources/js/components/fieldtypes/ToggleFieldtype.vue
index 0faba9f5d64..a92bfa7bb8c 100644
--- a/resources/js/components/fieldtypes/ToggleFieldtype.vue
+++ b/resources/js/components/fieldtypes/ToggleFieldtype.vue
@@ -4,7 +4,6 @@
             <Switch
                 @update:model-value="update"
                 :disabled="config.disabled || isReadOnly"
-                :size="config.size"
                 :id="fieldId"
                 :model-value="value"
                 :read-only="isReadOnly"
diff --git a/resources/js/components/ui/Publish/FieldsProvider.vue b/resources/js/components/ui/Publish/FieldsProvider.vue
index f342c91d47a..2e56d00fa78 100644
--- a/resources/js/components/ui/Publish/FieldsProvider.vue
+++ b/resources/js/components/ui/Publish/FieldsProvider.vue
@@ -19,12 +19,16 @@ const props = defineProps({
         type: String,
         default: (props) => props.pathPrefix,
     },
+    size: {
+        type: String,
+    },
 });
 
 provideFieldsContext({
     fields: toRef(() => props.fields),
     fieldPathPrefix: toRef(() => props.fieldPathPrefix),
     metaPathPrefix: toRef(() => props.metaPathPrefix),
+    size: toRef(() => props.size),
 });
 </script>
 

From a808bd4661ea9159fc143634f2fc3f304d76822f Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 19 Sep 2025 16:58:07 +0100
Subject: [PATCH 3/5] WIP

---
 packages/ui/src/Textarea.vue                              | 8 +++++++-
 .../js/components/fieldtypes/ButtonGroupFieldtype.vue     | 5 +++++
 resources/js/components/fieldtypes/SelectFieldtype.vue    | 4 ++++
 resources/js/components/fieldtypes/TextFieldtype.vue      | 2 +-
 resources/js/components/fieldtypes/TextareaFieldtype.vue  | 4 ++++
 resources/js/components/fieldtypes/ToggleFieldtype.vue    | 5 +++++
 6 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/Textarea.vue b/packages/ui/src/Textarea.vue
index 9dc5b7c43d5..41eb998d1c0 100644
--- a/packages/ui/src/Textarea.vue
+++ b/packages/ui/src/Textarea.vue
@@ -14,18 +14,24 @@ const props = defineProps({
     required: { type: Boolean, default: false },
     resize: { type: String, default: 'vertical' },
     rows: { type: [Number, String], default: 4 },
+    size: { type: String, default: 'base' },
     modelValue: { type: String, default: null },
     limit: { type: Number, default: null },
 });
 
 const classes = cva({
     base: [
-        'w-full block bg-white dark:bg-gray-900 px-3 pt-2.5 pb-3 rounded-lg',
+        'w-full block bg-white dark:bg-gray-900',
         'border border-gray-300 with-contrast:border-gray-500 dark:border-x-0 dark:border-t-0 dark:border-white/10 dark:inset-shadow-2xs dark:inset-shadow-black',
         'text-gray-900 dark:text-gray-300',
         'appearance-none antialiased shadow-ui-sm disabled:shadow-none read-only:border-dashed not-prose'
     ],
     variants: {
+        size: {
+            base: 'text-base rounded-lg px-3 pt-2.5 pb-3',
+            sm: 'text-sm rounded-md px-2.5 pt-1.5 pb-2',
+            xs: 'text-xs rounded-xs px-2 pt-1 pb-1.5',
+        },
         resize: {
             both: 'resize',
             horizontal: 'resize-x',
diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index 36e89887648..aced5295ef1 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -7,6 +7,7 @@
             :key="$index"
             :name="name"
             :read-only="isReadOnly"
+            :size="fieldsContext.size.value"
             :text="option.label || option.value"
             :value="option.value"
             :variant="value == option.value ? 'pressed' : 'default'"
@@ -28,6 +29,10 @@ export default {
         ButtonGroup
     },
 
+    inject: {
+        fieldsContext: 'PublishFieldsContext',
+    },
+
     data() {
         return {
             resizeObserver: null,
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 1c8ace9d27f..b298e3c4beb 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -11,6 +11,7 @@
         :placeholder="__(config.placeholder)"
         :read-only="isReadOnly"
         :searchable="config.searchable || config.taggable"
+        :size="size"
         :taggable="config.taggable"
         :id="id"
         @update:modelValue="comboboxUpdated"
@@ -22,6 +23,9 @@ import Fieldtype from '@/components/fieldtypes/fieldtype.js';
 import HasInputOptions from './HasInputOptions.js';
 import { Combobox } from '@/components/ui';
 import { computed } from 'vue';
+import { injectFieldsContext } from './../ui/Publish/FieldsProvider.vue';
+
+const { size } = injectFieldsContext();
 
 const emit = defineEmits(Fieldtype.emits);
 const props = defineProps(Fieldtype.props);
diff --git a/resources/js/components/fieldtypes/TextFieldtype.vue b/resources/js/components/fieldtypes/TextFieldtype.vue
index a522c9a27a3..29b9c66860f 100644
--- a/resources/js/components/fieldtypes/TextFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextFieldtype.vue
@@ -7,12 +7,12 @@
         :autocomplete="config.autocomplete"
         :autoselect="config.autoselect"
         :type="config.input_type"
-        :size="size"
         :read-only="isReadOnly"
         :prepend="__(config.prepend)"
         :append="__(config.append)"
         :limit="config.character_limit"
         :placeholder="__(config.placeholder)"
+        :size="size"
         :name="name"
         :id="id"
         :direction="config.direction"
diff --git a/resources/js/components/fieldtypes/TextareaFieldtype.vue b/resources/js/components/fieldtypes/TextareaFieldtype.vue
index 91442bfbff9..12eb8cd7bc4 100644
--- a/resources/js/components/fieldtypes/TextareaFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextareaFieldtype.vue
@@ -7,6 +7,7 @@
         :limit="config.character_limit || null"
         :placeholder="__(config.placeholder)"
         :model-value="value"
+        :size="fieldsContext.size.value"
         @blur="$emit('blur')"
         @focus="$emit('focus')"
         @update:model-value="updateDebounced"
@@ -20,5 +21,8 @@ import { Textarea } from '@/components/ui';
 export default {
     mixins: [Fieldtype],
     components: { Textarea },
+    inject: {
+        fieldsContext: 'PublishFieldsContext',
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/ToggleFieldtype.vue b/resources/js/components/fieldtypes/ToggleFieldtype.vue
index a92bfa7bb8c..7d93863339e 100644
--- a/resources/js/components/fieldtypes/ToggleFieldtype.vue
+++ b/resources/js/components/fieldtypes/ToggleFieldtype.vue
@@ -7,6 +7,7 @@
                 :id="fieldId"
                 :model-value="value"
                 :read-only="isReadOnly"
+                :size="fieldsContext.size.value"
             />
             <Heading v-if="inlineLabel" v-html="$markdown(__(inlineLabel), { openLinksInNewTabs: true })" />
         </div>
@@ -26,6 +27,10 @@ export default {
         Heading,
     },
 
+    inject: {
+        fieldsContext: 'PublishFieldsContext',
+    },
+
     computed: {
         inlineLabel() {
             return this.value

From 3ea8df895899b4c0014864cabfb52717d687246a Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Mon, 22 Sep 2025 16:14:11 +0100
Subject: [PATCH 4/5] Fix tests

---
 resources/js/components/fieldtypes/SelectFieldtype.vue | 2 +-
 resources/js/components/fieldtypes/TextFieldtype.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index b298e3c4beb..63e3783a46a 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -25,7 +25,7 @@ import { Combobox } from '@/components/ui';
 import { computed } from 'vue';
 import { injectFieldsContext } from './../ui/Publish/FieldsProvider.vue';
 
-const { size } = injectFieldsContext();
+const { size } = injectFieldsContext() || {};
 
 const emit = defineEmits(Fieldtype.emits);
 const props = defineProps(Fieldtype.props);
diff --git a/resources/js/components/fieldtypes/TextFieldtype.vue b/resources/js/components/fieldtypes/TextFieldtype.vue
index 29b9c66860f..60c82825094 100644
--- a/resources/js/components/fieldtypes/TextFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextFieldtype.vue
@@ -28,7 +28,7 @@ import { Input } from '@/components/ui';
 import { computed } from 'vue';
 import { injectFieldsContext } from './../ui/Publish/FieldsProvider.vue';
 
-const { size } = injectFieldsContext();
+const { size } = injectFieldsContext() || {};
 
 const emit = defineEmits(Fieldtype.emits);
 const props = defineProps(Fieldtype.props);

From b8417ccd666cd002c7bae30600bad7815618ca19 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 22 Sep 2025 21:58:25 -0400
Subject: [PATCH 5/5] Make border radii consistent

---
 packages/ui/src/Input/Input.vue      |  4 +--
 packages/ui/src/Textarea.vue         |  4 +--
 resources/views/playground.blade.php | 41 ++++++++++++----------------
 3 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/packages/ui/src/Input/Input.vue b/packages/ui/src/Input/Input.vue
index 84d8536c906..ee6e32ab3c8 100644
--- a/packages/ui/src/Input/Input.vue
+++ b/packages/ui/src/Input/Input.vue
@@ -47,8 +47,8 @@ const inputClasses = computed(() => {
         variants: {
             size: {
                 base: 'text-base rounded-lg px-3 py-2 h-10 leading-[1.375rem]',
-                sm: 'text-sm rounded-md px-2.5 py-1.5 h-8 leading-[1.125rem]',
-                xs: 'text-xs rounded-xs px-2 py-1.5 h-6 leading-[1.125rem]',
+                sm: 'text-sm rounded-lg px-2.5 py-1.5 h-8 leading-[1.125rem]',
+                xs: 'text-xs rounded-md px-2 py-1.5 h-6 leading-[1.125rem]',
             },
             variant: {
                 default: '',
diff --git a/packages/ui/src/Textarea.vue b/packages/ui/src/Textarea.vue
index 41eb998d1c0..d011bc911c0 100644
--- a/packages/ui/src/Textarea.vue
+++ b/packages/ui/src/Textarea.vue
@@ -29,8 +29,8 @@ const classes = cva({
     variants: {
         size: {
             base: 'text-base rounded-lg px-3 pt-2.5 pb-3',
-            sm: 'text-sm rounded-md px-2.5 pt-1.5 pb-2',
-            xs: 'text-xs rounded-xs px-2 pt-1 pb-1.5',
+            sm: 'text-sm rounded-lg px-2.5 pt-1.5 pb-2',
+            xs: 'text-xs rounded-md px-2 pt-1 pb-1.5',
         },
         resize: {
             both: 'resize',
diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
index e8862d2d169..fed0c41f1e6 100644
--- a/resources/views/playground.blade.php
+++ b/resources/views/playground.blade.php
@@ -168,31 +168,24 @@
     </section>
 
     <section class="space-y-4">
-        <ui-heading size="lg">Input</ui-heading>
+        <ui-heading size="lg" id="input">Input</ui-heading>
         <div class="flex gap-2">
-            <ui-input
-                name="email"
-                type="email"
-                required
-                label="Email"
-                value="Edit me"
-            />
-            <ui-input
-                name="email"
-                type="email"
-                required
-                label="Email"
-                read-only
-                value="Read only. Tab, select, but not edit."
-            />
-            <ui-input
-                name="email"
-                type="email"
-                required
-                label="Email"
-                disabled
-                value="Disabled. Cant touch me."
-            />
+            <ui-button text="Default" />
+            <ui-input name="email" type="email" required label="Email" value="Edit me" />
+            <ui-input name="email" type="email" required label="Email" read-only value="Read only. Tab, select, but not edit." />
+            <ui-input name="email" type="email" required label="Email" disabled value="Disabled. Cant touch me." />
+        </div>
+        <div class="flex gap-2">
+        <ui-button text="Small" size="sm" />
+            <ui-input name="email" type="email" size="sm" required label="Email" value="Edit me" />
+            <ui-input name="email" type="email" size="sm" required label="Email" read-only value="Read only. Tab, select, but not edit." />
+            <ui-input name="email" type="email" size="sm" required label="Email" disabled value="Disabled. Cant touch me." />
+        </div>
+        <div class="flex gap-2">
+            <ui-button text="Extra Small" size="xs" />
+            <ui-input name="email" type="email" size="xs" required label="Email" value="Edit me" />
+            <ui-input name="email" type="email" size="xs" required label="Email" read-only value="Read only. Tab, select, but not edit." />
+            <ui-input name="email" type="email" size="xs" required label="Email" disabled value="Disabled. Cant touch me." />
         </div>
     </section>