@tabler/core 1.1.1 → 1.2.0

package/docs/ui/components/ribbons.mdx

@@ -1,207 +0,0 @@
----
-title: Ribbons
-summary: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
-description: Highlight elements with graphical ribbons.	
----
-
-## Default markup
-
-Use the `ribbon` class to add the default ribbon to any section of your interface.
-
-```html example columns={1} centered background="base"
-<div class="card">
-  <div class="card-body" style="height: 5rem"></div>
-  <div class="ribbon">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      stroke-width="2"
-      stroke="currentColor"
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path
-        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
-      />
-    </svg>
-  </div>
-</div>
-```
-
-```html
-<div class="card">
-  <div class="card-body"></div>
-  <div class="ribbon">
-    <!-- SVG icon from http://tabler.io/icons/icon/star -->
-    <svg>...</svg>
-  </div>
-</div>
-```
-
-## Ribbon position
-
-You can change the position of a ribbon by adding one of the following classes to the element:
-
-- `ribbon-top` - moves it to the top
-- `ribbon-end` - moves it to the right
-- `ribbon-bottom` - moves it to the bottom
-- `ribbon-start` - moves it to the left
-
-Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-left` will move the ribbon to the top left corner.
-
-```html example columns={1} centered background="base"
-<div class="card">
-  <div class="card-body" style="height: 5rem"></div>
-  <div class="ribbon ribbon-top ribbon-start">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      stroke-width="2"
-      stroke="currentColor"
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path
-        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
-      />
-    </svg>
-  </div>
-</div>
-```
-
-```html
-<div class="card">
-  <div class="card-body"></div>
-  <div class="ribbon ribbon-top ribbon-start">
-    <!-- SVG icon from http://tabler.io/icons/icon/star -->
-    <svg>...</svg>
-  </div>
-</div>
-```
-
-## Ribbon color
-
-Customize the ribbon's background color. You can click [here](/docs/ui/base/colors) to see the list of available colors.
-
-```html example columns={1} centered background="base"
-<div class="card">
-  <div class="card-body" style="height: 5rem"></div>
-  <div class="ribbon bg-red">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      stroke-width="2"
-      stroke="currentColor"
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path
-        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
-      />
-    </svg>
-  </div>
-</div>
-```
-
-```html
-<div class="card">
-  <div class="card-body"></div>
-  <div class="ribbon bg-red">
-    <!-- SVG icon from http://tabler.io/icons/icon/star -->
-    <svg>...</svg>
-  </div>
-</div>
-```
-
-## Ribbon text
-
-Add your own text to a ribbon to display any additional information and make it easy to spot for users.
-
-```html example columns={1} centered background="base"
-<div class="card">
-  <div class="card-body" style="height: 5rem"></div>
-  <div class="ribbon bg-green">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      stroke-width="2"
-      stroke="currentColor"
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path
-        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
-      />
-    </svg>
-  </div>
-</div>
-```
-
-```html
-<div class="card">
-  <div class="card-body"></div>
-  <div class="ribbon bg-green">
-    <!-- SVG icon from http://tabler.io/icons/icon/star -->
-    <svg>...</svg>
-  </div>
-</div>
-```
-
-## Ribbon style
-
-Change the style of a ribbon to make it go well with your interface design.
-
-```html example columns={1} centered background="base"
-<div class="card w-100">
-  <div class="card-body" style="height: 5rem"></div>
-  <div class="ribbon ribbon-bookmark bg-orange">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      stroke-width="2"
-      stroke="currentColor"
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path
-        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"
-      />
-    </svg>
-  </div>
-</div>
-```
-
-```html
-<div class="card">
-  <div class="card-body"></div>
-  <div class="ribbon ribbon-bookmark bg-orange">
-    <!-- SVG icon from http://tabler.io/icons/icon/star -->
-    <svg>...</svg>
-  </div>
-</div>
-```

package/docs/ui/components/segmented-control.mdx

@@ -1,401 +0,0 @@
----
-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>
-```