Point README at bladewindui/ui

README.md

@@ -1,108 +1,18 @@
-<p><img src="https://img.shields.io/github/license/bladewindui/bladewindui" alt="License" /></p><br />
+<p><img src="https://img.shields.io/github/license/bladewindui/ui" alt="License" /></p><br />
 <p><img src="https://bladewindui.com/assets/images/bw-logo.png" style="height: 30px; margin-bottom:10px" /></p>
 
-BladewindUI is a collection of UI components written purely using TailwindCSS, Laravel blade templates and Vanilla Javascript. These components are super simple to use and come with different levels of customization.
-<br /><br />
-
-### Installation
-The full installation guide is available on https://bladewindui.com/#install.
-<br />
-
-BladewindUI is very specific to Laravel since all components are written purely using blade syntax. To install in your Laravel project simply run this command in the terminal at the root of your project.
-<br /><br />
-
-```
-composer require bladewindui/bladewindui
-```
-<br />
-
-Next you need to **publish the package assets** by running this command, still in the terminal at the root of your Laravel project.
-
-<br />
-
-```
-php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=bladewind-public --force
-```
-<br />
-
-Now include the BladewindUI css file in the &lt;head&gt; of your pages. This should ideally be done in the layouts file your app pages extend from.
-
-<br />
-
-```
-<link href="{{ asset('vendor/bladewind/css/animate.min.css') }}" rel="stylesheet" />
-```
-```
-<link href="{{ asset('vendor/bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" />
-```
-
-<br />
-
-Finally, include the BladewindUI javascript file anywhere before the closing of the &lt;/body&gt; tag of your pages. Again, this should ideally be done in the layouts file your app's pages extend from.
-
-<br />
-
-```
-<script src="{{ asset('vendor/bladewind/js/helpers.js') }}" type="text/javascript"></script>
-```
-
-<br />
+This is the Laravel application that powers [bladewindui.com](https://bladewindui.com) — the documentation
+site for **BladewindUI**, a collection of UI components written purely using TailwindCSS, Laravel Blade
+templates and vanilla JavaScript.
 
-You are now ready to start using any of the BladewindUI components in your application
+The component library itself lives in a separate repo: **[bladewindui/ui](https://github.com/bladewindui/ui)**.
+That is also where installation instructions and the full, always-current component list live, so they
+are not repeated here — this README would just go stale a second time. See its
+[README](https://github.com/bladewindui/ui#readme) for both, or the live, generated versions at
+[bladewindui.com/install](https://bladewindui.com/install) and [bladewindui.com/components](https://bladewindui.com/components).
 
 <br />
 
-```
-<x-bladewind::button>Save User</x-bladewind::button>
-```
-
-<br /><br />
-### Components Include
-
-- **[Accordion](https://bladewindui.com/component/accordion)**
-- **[Alert](https://bladewindui.com/component/alert)**
-- **[Avatar](https://bladewindui.com/component/avatar)**
-- **[Bell](https://bladewindui.com/component/bell)**
-- **[Button](https://bladewindui.com/component/button)**
-- **[Card](https://bladewindui.com/component/card)**
-- **[Centered Content](https://bladewindui.com/component/centered-content)**
-- **[Chart](https://bladewindui.com/component/chart)**
-- **[Checkbox](https://bladewindui.com/component/checkbox)**
-- **[CheckCard](https://bladewindui.com/component/checkcard)**
-- **[Colorpicker](https://bladewindui.com/component/colorpicker)**
-- **[Datepicker](https://bladewindui.com/component/datepicker)**
-- **[Dropdown](https://bladewindui.com/component/dropdown)**
-- **[Dropmenu](https://bladewindui.com/component/dropmenu)**
-- **[Empty State](https://bladewindui.com/component/empty-state)**
-- **[Filepicker](https://bladewindui.com/component/filepicker)**
-- **[Horizontal Line Graph](https://bladewindui.com/component/horizontal-line-graph)**
-- **[Icon](https://bladewindui.com/component/icon)**
-- **[Input](https://bladewindui.com/component/input)**
-- **[List View](https://bladewindui.com/component/list-view)**
-- **[Modal](https://bladewindui.com/component/modal)**
-- **[Notification](https://bladewindui.com/component/notification)**
-- **[Process Indicator](https://bladewindui.com/component/process-indicator)**
-- **[Progress Bar](https://bladewindui.com/component/progress-bar)**
-- **[Radio Button](https://bladewindui.com/component/radio-button)**
-- **[Rating](https://bladewindui.com/component/rating)**
-- **[Select](https://bladewindui.com/component/select)**
-- **[Statistic](https://bladewindui.com/component/statistic)**
-- **[Spinner](https://bladewindui.com/component/spinner)**
-- **[Tab](https://bladewindui.com/component/tab)**
-- **[Table](https://bladewindui.com/component/table)**
-- **[Tag](https://bladewindui.com/component/tag)**
-- **[Textarea](https://bladewindui.com/component/textarea)**
-- **[Timeline](https://bladewindui.com/component/timeline)**
-- **[Timepicker](https://bladewindui.com/component/timepicker)**
-- **[Toggle](https://bladewindui.com/component/toggle)**
-- **[Verification Code](https://bladewindui.com/component/verification-code)**
-
-<br /><br />
-
-Check out the full documentation on https://bladewindui.com.
-
-<br /><br />
-
 ## MCP Documentation
 
 The `mcp/` directory contains clean, machine-readable Markdown documentation for every component. These files are intended for consumption by MCP (Model Context Protocol) servers so that AI assistants can understand how to use BladewindUI components.

mcp/accordion.md

@@ -6,120 +6,93 @@ url: /component/accordion
 
 # Accordion
 
-The accordion component allows users to expand or collapse sections of content. It's commonly used to organize information in a compact, accessible way. Each section typically has a header that can be clicked to toggle the visibility of its associated content.
+The accordion component lets users expand or collapse sections of content, keeping information compact and accessible. Each section has a clickable header that toggles the visibility of its content.
 
 ## Basic Usage
 
-Each accordion item requires a `title` attribute for the clickable header. The body content is placed inside the item tags.
-
 ```blade
 <x-bladewind::accordion>
     <x-bladewind::accordion.item title="What is BladewindUI?">
         <p>
-            BladewindUI is a collection...
+            BladewindUI is a collection of super simple but elegant Laravel blade-based UI components using TailwindCSS and vanilla Javascript.
         </p>
     </x-bladewind::accordion.item>
     <x-bladewind::accordion.item title="How can I install the latest version of the library?">
         <div>
-            At the root of your Laravel...
+            At the root of your Laravel project, type the following composer command in your terminal to pull in the package.
+            <pre><code>composer require bladewindui/ui</code></pre>
         </div>
     </x-bladewind::accordion.item>
     <x-bladewind::accordion.item title="How can I customize the library for my theme?">
         <div>
-            BladewindUI has been designed ...
+            BladewindUI has been designed to not interfere with the existing components in your project.
         </div>
     </x-bladewind::accordion.item>
 </x-bladewind::accordion>
 ```
 
 ## Custom Title Slot
 
-If the title of your accordion item is not a simple string, you can define your content in a title slot.
+If the title of your accordion item is not a simple string, define the content in a `title` slot instead of the `title` attribute.
 
 ```blade
 <x-bladewind::accordion>
     <x-bladewind::accordion.item>
         <x-slot:title>
             <div class="inline-flex">
-                <div><img src="/assets/images/icon.png" class="size-10..." alt="logo"/></div>
+                <div><img src="/path/to/icon.png" class="size-10 rounded-full border-2 border-gray-200 p-1" alt="logo"/></div>
                 <div class="ml-2">
                     <div>What is BladewindUI library?</div>
-                    <div class="text-sm ...">version 2.8.0</div>
+                    <div class="text-sm font-normal opacity-45 -mt-1.5">version 2.8.0</div>
                 </div>
             </div>
         </x-slot:title>
         <p>
-            BladewindUI is a collection...
+            BladewindUI is a collection of super simple but elegant Laravel blade-based UI components.
         </p>
     </x-bladewind::accordion.item>
-    ...
 </x-bladewind::accordion>
 ```
 
 ## Open Multiple Accordion Items
 
-By default only one accordion can stay open at any point in time. You can disable this feature by setting `can_open_multiple="true"`. Now any closed accordion that is clicked will be opened. Likewise, any accordion that is open will be closed when clicked.
+By default only one accordion item can stay open at a time. Set `can_open_multiple="true"` to allow any closed item to open without closing the others.
 
 ```blade
-<x-bladewind::accordion
-    can_open_multiple="true">
+<x-bladewind::accordion can_open_multiple="true">
     <x-bladewind::accordion.item title="What is BladewindUI?">
-        <p>
-            BladewindUI is a collection...
-        </p>
-    </x-bladewind::accordion.item>
-    <x-bladewind::accordion.item title="How can I install the latest version of the library?">
-        <div>
-            At the root of your Laravel...
-        </div>
-    </x-bladewind::accordion.item>
-    <x-bladewind::accordion.item title="How can I customize the library for my theme?">
-        <div>
-            BladewindUI has been designed ...
-        </div>
+        ...
     </x-bladewind::accordion.item>
 </x-bladewind::accordion>
 ```
 
 ## Ungrouped Accordions
 
-The examples above showed the accordion items within one card element, each separated by a line. To separate accordion items so they stand alone, set `grouped="false"`.
+The examples above group accordion items in one card, separated by lines. To make each item stand alone, set `grouped="false"`.
 
 ```blade
-<x-bladewind::accordion
-    grouped="false">
+<x-bladewind::accordion grouped="false">
     <x-bladewind::accordion.item title="What is BladewindUI?">
-        <p>
-            BladewindUI is a collection...
-        </p>
-    </x-bladewind::accordion.item>
-    <x-bladewind::accordion.item title="How can I install the latest version of the library?">
-        <div>
-            At the root of your Laravel...
-        </div>
-    </x-bladewind::accordion.item>
-    <x-bladewind::accordion.item title="How can I customize the library for my theme?">
-        <div>
-            BladewindUI has been designed ...
-        </div>
+        ...
     </x-bladewind::accordion.item>
 </x-bladewind::accordion>
 ```
 
 ## Colourful Accordions
 
-You can define the background colour of the accordion by setting the `color` attribute. This is only enforced if `grouped="false"`. Available colours include: `primary`, `blue`, `red`, `yellow`, `green`, `purple`, `pink`, `orange`, `black`, `cyan`, `violet`, `indigo`, `fuchsia`.
+You can set the background colour of the accordion with the `color` attribute. This only takes effect when `grouped="false"`.
 
 ```blade
-<x-bladewind::accordion
-    grouped="false"
-    color="yellow">
+<x-bladewind::accordion grouped="false" color="yellow">
     <x-bladewind::accordion.item title="What is BladewindUI?">
-        <p>
-            BladewindUI is a collection...
-        </p>
+        ...
+    </x-bladewind::accordion.item>
+</x-bladewind::accordion>
+
+<x-bladewind::accordion grouped="false" color="pink">
+    <x-bladewind::accordion.item title="What is BladewindUI?">
+        ...
     </x-bladewind::accordion.item>
-...
 </x-bladewind::accordion>
 ```
 
@@ -129,24 +102,24 @@ You can define the background colour of the accordion by setting the `color` att
 
 | Attribute | Default | Description |
 |---|---|---|
-| grouped | true | Should the accordion items be grouped within one card container. If `true`, the accordions are divided by lines and grouped in one big container. `true` \| `false` |
-| can_open_multiple | false | Should the accordion allow opening of items without first closing what is open. `true` \| `false` |
-| color | _blank_ | The accordion background. Applicable when `grouped="false"`. `primary` \| `blue` \| `red` \| `yellow` \| `green` \| `purple` \| `pink` \| `orange` \| `black` \| `cyan` \| `violet` \| `indigo` \| `fuchsia` |
-| no_padding | false | Specifies if there should be air around the accordion group. `true` \| `false` |
-| content_can_close | true | Determines if clicking on the accordion content will close it when it is open. `true` \| `false` |
-| class | _blank_ | Any additional css classes can be added using this attribute. For example to make your accordion more rounded you can add `class="rounded-2xl"`. |
+| grouped | true | Whether the accordion items are grouped within one card container, divided by lines. `true` \| `false` |
+| can_open_multiple | false | Whether the accordion allows opening items without first closing what is open. `true` \| `false` |
+| color | *blank* | The accordion background. Applies when `grouped="false"`. `primary` \| `blue` \| `red` \| `yellow` \| `green` \| `purple` \| `pink` \| `orange` \| `black` \| `cyan` \| `violet` \| `indigo` \| `fuchsia` |
+| no_padding | false | Whether there should be air around the accordion group. `true` \| `false` |
+| content_can_close | true | Whether clicking the accordion content closes it when open. `true` \| `false` |
+| class | *blank* | Any additional css classes, e.g. `class="rounded-2xl"`. |
 
 ### Accordion Item Component
 
 | Attribute | Default | Description |
 |---|---|---|
-| open | false | Should the accordion items be opened or closed by default. `true` \| `false` |
-| title | _blank_ | Label to display as the title of the accordion. |
-| color | _blank_ | The accordion background. Applicable when `grouped="false"`. `primary` \| `blue` \| `red` \| `yellow` \| `green` \| `purple` \| `pink` \| `orange` \| `black` \| `cyan` \| `violet` \| `indigo` \| `fuchsia` |
-| class | _blank_ | Any additional css classes can be added using this attribute. |
-| no_padding | false | Specifies if there should be air around each accordion item. `true` \| `false` |
-| content_can_close | true | Determines if clicking on the accordion content will close it when it is open. `true` \| `false` |
-| nonce | null | Used when implementing context security policies and require to pass a nonce to inline scripts. |
+| open | false | Whether the accordion item is open or closed by default. `true` \| `false` |
+| title | *blank* | Label to display as the title of the accordion. |
+| color | *blank* | The accordion background. Applies when `grouped="false"`. `primary` \| `blue` \| `red` \| `yellow` \| `green` \| `purple` \| `pink` \| `orange` \| `black` \| `cyan` \| `violet` \| `indigo` \| `fuchsia` |
+| class | *blank* | Any additional css classes, e.g. `class="rounded-2xl"`. |
+| no_padding | false | Whether there should be air around the accordion item. `true` \| `false` |
+| content_can_close | true | Whether clicking the accordion content closes it when open. `true` \| `false` |
+| nonce | null | Nonce value for content security policies applied to inline scripts. Can be set globally via the `script` key in `config/bladewind.php`. |
 
 ## Full Example
 
@@ -156,16 +129,12 @@ You can define the background colour of the accordion by setting the `color` att
     can_open_multiple="false"
     color="pink"
     class="rounded-lg shadow-sm">
-...
+    <x-bladewind::accordion.item
+        color="blue"
+        open="false"
+        title="What is BladewindUI?"
+        class="shadow">
+        ...
+    </x-bladewind::accordion.item>
 </x-bladewind::accordion>
 ```
-
-```blade
-<x-bladewind::accordion.item
-    color="blue"
-    open="false"
-    title="What is BladewindUI?"
-    class="shadow">
-...
-</x-bladewind::accordion.item>
-```