offline docs

offline-docs/daisyui/join.md

@@ -0,0 +1,97 @@
+# daisyUI Documentation - Join Component
+
+Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.
+
+## Classes and Usage
+
+### Core Classes:
+- **join** - For grouping multiple items
+- **join-item** - Item inside join. Can be a button, input, etc.
+- **join-vertical** - Show items vertically
+- **join-horizontal** - Show items horizontally
+
+## Examples
+
+### Basic Join
+
+```html
+<div class="join">
+  <button class="btn join-item">Button</button>
+  <button class="btn join-item">Button</button>
+  <button class="btn join-item">Button</button>
+</div>
+```
+
+### Group Items Vertically
+
+```html
+<div class="join join-vertical">
+  <button class="btn join-item">Button</button>
+  <button class="btn join-item">Button</button>
+  <button class="btn join-item">Button</button>
+</div>
+```
+
+### Responsive Join (Vertical on small, horizontal on large)
+
+```html
+<div class="join join-vertical lg:join-horizontal">
+  <button class="btn join-item">Button</button>
+  <button class="btn join-item">Button</button>
+  <button class="btn join-item">Button</button>
+</div>
+```
+
+### Join with Extra Elements
+
+Even if join-item is not a direct child of the group, it still gets the style
+
+```html
+<div class="join">
+  <div>
+    <div>
+      <input class="input join-item" placeholder="Search" />
+    </div>
+  </div>
+  <select class="select join-item">
+    <option disabled selected>Filter</option>
+    <option>Sci-fi</option>
+    <option>Drama</option>
+    <option>Action</option>
+  </select>
+  <div class="indicator">
+    <span class="indicator-item badge badge-secondary">new</span>
+    <button class="btn join-item">Search</button>
+  </div>
+</div>
+```
+
+### Custom Border Radius
+
+```html
+<div class="join">
+  <input class="input join-item" placeholder="Email" />
+  <button class="btn join-item rounded-r-full">Subscribe</button>
+</div>
+```
+
+### Join Radio Inputs with Button Style
+
+```html
+<div class="join">
+  <input class="join-item btn" type="radio" name="options" aria-label="Radio 1" />
+  <input class="join-item btn" type="radio" name="options" aria-label="Radio 2" />
+  <input class="join-item btn" type="radio" name="options" aria-label="Radio 3" />
+</div>
+```
+
+## Features
+
+- Groups multiple items together
+- Applies border radius to first and last items
+- Horizontal or vertical layout options
+- Responsive design
+- Works with buttons, inputs, selects, and other elements
+- Customizable with Tailwind classes
+
+This component is useful for creating grouped interfaces like button groups, input fields with buttons, or any set of related UI elements that should appear as a cohesive unit.