Add documentation for segmented control component (#2134)

* Add documentation for segmented control component

* Enhance documentation for segmented control component with additional examples and usage guidelines

* Create stale-pianos-crash.md

* Add changeset for @tabler/core minor update

.changeset/stale-pianos-crash.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": "minor"
+---
+
+Add documentation for segmented control component

docs/ui/components/segmented-control.mdx

@@ -0,0 +1,201 @@
+---
+title: Segmented Control
+summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
+---
+
+To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links. 
+
+```html
+<nav class="nav nav-segmented" role="tablist">
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		First
+	</button>
+	...
+</nav>
+```
+
+See the example below to see how the segmented control looks.
+
+```html example centered background="white"
+<nav class="nav nav-segmented" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		First
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Second
+	</button>
+	<button class="nav-link" disabled role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Disabled
+	</button>
+</nav>
+```
+
+## Full width
+
+To make the segmented control full width, add the `w-100` class to the `nav` element. It will take up the full width of its parent container.
+
+```html
+<nav class="nav nav-segmented w-100" role="tablist">
+	...
+</nav>
+```
+
+The results can be seen in the example below.
+
+```html example vcentered background="white"
+<nav class="nav nav-segmented w-100" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		Daily
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Weekly
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Monthly
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Quarterly
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Yearly
+	</button>
+</nav>
+```
+
+## With emojis
+
+You can also use emojis in the segmented control. To do this, add the emoji inside the `button` element.
+
+```html example centered background="white"
+<nav class="nav nav-segmented nav-1" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		👦
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		👦🏿
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		👦🏾
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		👦🏽
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		👦🏼
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		👦🏻
+	</button>
+</nav>
+```
+
+## With icons
+
+You can also use icons in the segmented control. To do this, add the icon inside the `button` element.
+
+
+```html example centered background="white"
+<nav class="nav nav-segmented" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		<!-- Download SVG icon from http://tabler.io/icons/icon/list -->
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M9 6l11 0"></path><path d="M9 12l11 0"></path><path d="M9 18l11 0"></path><path d="M5 6l0 .01"></path><path d="M5 12l0 .01"></path><path d="M5 18l0 .01"></path></svg>
+		List
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+	<!-- Download SVG icon from http://tabler.io/icons/icon/layout -->
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path></svg>
+		Kanban
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		<!-- Download SVG icon from http://tabler.io/icons/icon/calendar -->
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
+		Calendar
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		<!-- Download SVG icon from http://tabler.io/icons/icon/files -->
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M15 3v4a1 1 0 0 0 1 1h4"></path><path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z"></path><path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>
+		Files
+	</button>
+</nav>
+```
+
+## Vertical direction
+
+To create a vertical segmented control, add the `nav-segmented-vertical` class to the `nav` element.
+
+```html
+<nav class="nav nav-segmented-vertical" role="tablist">
+	...
+</nav>
+```
+
+The results can be seen in the example below.
+
+```html example centered background="white"
+<nav class="nav nav-segmented nav-segmented-vertical" role="tablist">
+		<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+	<!-- Download SVG icon from http://tabler.io/icons/icon/list -->
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M9 6l11 0"></path><path d="M9 12l11 0"></path><path d="M9 18l11 0"></path><path d="M5 6l0 .01"></path><path d="M5 12l0 .01"></path><path d="M5 18l0 .01"></path></svg>
+				List
+		</button>
+		<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+	<!-- Download SVG icon from http://tabler.io/icons/icon/layout -->
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path></svg>
+				Kanban
+		</button>
+		<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+	<!-- Download SVG icon from http://tabler.io/icons/icon/calendar -->
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
+				Calendar
+		</button>
+		<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+	<!-- Download SVG icon from http://tabler.io/icons/icon/files -->
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M15 3v4a1 1 0 0 0 1 1h4"></path><path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z"></path><path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>
+				Files
+		</button>
+</nav>
+```
+
+## Sizes 
+
+You can also change the size of the segmented control. To do this, add the `nav-sm` or `nv-lg` class to the `nav` element. The `nav-sm` class will make the segmented control smaller, while the `nav-lg` class will make it larger.
+
+```html
+<nav class="nav nav-segmented nav-sm" role="tablist">
+	...
+</nav>
+```
+
+The results can be seen in the examples below.
+
+```html example vertical centered background="white" separated
+<nav class="nav nav-segmented nav-sm" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		List
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Kanban
+	</button>
+	<button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1">
+		Calendar
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Files
+	</button>
+</nav>
+
+<nav class="nav nav-segmented nav-lg" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		List
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Kanban
+	</button>
+	<button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1">
+		Calendar
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Files
+	</button>
+</nav>
+```