Read more / read less inline variant

package.json

@@ -16,6 +16,7 @@
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.9",
         "@tailwindcss/vite": "^4.2.1",
+        "@tushargugnani/tailwind-group-peer-checked": "^1.0.0",
         "concurrently": "^9.2.1",
         "laravel-vite-plugin": "^2.0.0",
         "tailwindcss": "^4.2.1",

resources/views/components-preview.blade.php

@@ -393,6 +393,21 @@
                     </x-rapidez::readmore>
                 </div>
             </div>
+            <div class="grid grid-cols-1 gap-5 items-start lg:grid-cols-3">
+                <div>
+                    <h3 class="text-xl font-bold mt-5">Inline</h3>
+                    <div class="text-sm text-muted">
+                        This component is a variant for the read more / read less component. This content has a default line-clamp-1,
+                        the buttons will show inside the text instead of below the text.
+                    </div>
+                </div>
+                <div class="flex flex-col gap-3">
+                    <h3 class="text-md font-bold">Inline</h3>
+                    <x-rapidez::readmore.inline>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates.
+                    </x-rapidez::readmore.inline>
+                </div>
+            </div>
 
             <h2 class="font-bold text-2xl mt-5">Prose component</h2>
             <x-rapidez::prose>

resources/views/components/readmore/inline.blade.php

@@ -0,0 +1,61 @@
+{{--
+Read more/less component using the Tailwind CSS `peer` utility.
+
+## Notes
+- **Clamping** The default of line-clamp-1 is used. It is recommended that you keep it line-clamp-1
+- **Buttons** You can't use <button tags inside the slots because it's wrapped by a <label. Simply use a <span tag.
+- When using this component with a CMS like Statamic, don't use a bard but use a simple text field
+
+## Slots
+- `more` Change the clickable element that reveals the content.
+- `less` Change the clickable element that collapses the content.
+
+## Example
+```
+<x-rapidez::readmore.inline>
+    Content
+</x-rapidez::readmore.inline>
+```
+
+## Changing the read more/less buttons
+```
+<x-rapidez::readmore.inline>
+    <x-slot:more>
+        Custom read more button
+    </x-slot:more>
+    <x-slot:less>
+        Custom read less button
+    </x-slot:less>
+</x-rapidez::readmore.inline>
+```
+--}}
+
+@slots(['more', 'less'])
+<div {{ $attributes->twMerge('read-more-component group') }}>
+    <input id="toggle" type="checkbox" class="hidden peer">
+    <div class="group flex mb-2">
+        <p {{ $slot->attributes->twMerge('content line-clamp-1 group-peer-checked:flex group-peer-checked:line-clamp-none') }}>
+            <span>
+                {{ $slot }}
+                @slotdefault('less')
+                    <label for="toggle" class="shrink-0">
+                        <x-rapidez::button.link tag="span" class="gap-1">
+                            @lang('Read less')
+                            <x-heroicon-o-chevron-up class="size-3.5 mt-px" stroke-width="2" />
+                        </x-rapidez::button.link>
+                    </label>
+                @endslotdefault
+            </span>
+        </p>
+        <label for="toggle" class="shrink-0">
+            <span {{ $more->attributes->twMerge('inline-flex group-peer-checked:hidden') }}>
+                @slotdefault('more')
+                    <x-rapidez::button.link tag="span" class="gap-1">
+                        @lang('Read more')
+                        <x-heroicon-o-chevron-down class="size-3.5 mt-px" stroke-width="2" />
+                    </x-rapidez::button.link>
+                @endslotdefault
+            </span>
+        </label>
+    </div>
+</div>