webcake-ui-kit 1.0.12 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/accordion-item/AccordionItem.vue

@@ -26,15 +26,7 @@
       </span>
       <span :class="['ui-accordion-item__icon', isOpen && 'ui-accordion-item__icon--open']">
         <slot name="icon">
-          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-            <path
-              d="m4 6 4 4 4-4"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
+          <ChevronDownIcon :size="16" />
         </slot>
       </span>
     </button>
@@ -45,10 +37,13 @@
 </template>
 
 <script>
+import ChevronDownIcon from '../../icons/ChevronDownIcon.vue'
+
 let uidCounter = 0
 
 export default {
   name: 'AccordionItem',
+  components: { ChevronDownIcon },
   inject: {
     accordion: { default: null }
   },

package/src/components/breadcrumb/Breadcrumb.vue

@@ -5,32 +5,8 @@
         <li v-for="(item, index) in items" :key="index" class="ui-breadcrumb__row">
           <span v-if="index > 0" class="ui-breadcrumb__separator" aria-hidden="true">
             <slot name="separator" :type="separator">
-              <svg
-                v-if="separator === 'slash'"
-                xmlns="http://www.w3.org/2000/svg"
-                width="14"
-                height="14"
-                viewBox="0 0 14 14"
-                fill="none"
-              >
-                <g clip-path="url(#clip0_3182_3913)">
-                  <path
-                    d="M12.524 0.857389C12.6948 0.686535 12.9718 0.686535 13.1426 0.857389C13.3135 1.02824 13.3135 1.30519 13.1426 1.47604L1.47598 13.1427C1.30513 13.3136 1.02818 13.3136 0.857328 13.1427C0.686473 12.9719 0.686473 12.6949 0.857328 12.5241L12.524 0.857389Z"
-                    fill="#5C5C5C"
-                  />
-                </g>
-                <defs>
-                  <clipPath id="clip0_3182_3913">
-                    <rect width="14" height="14" fill="white" />
-                  </clipPath>
-                </defs>
-              </svg>
-              <svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-                <path
-                  d="M4.88882 3.13888C5.08815 2.93955 5.41182 2.93955 5.61115 3.13888L9.11115 6.63888C9.31048 6.83821 9.31048 7.16188 9.11115 7.36121L5.61115 10.8612C5.41182 11.0605 5.08815 11.0605 4.88882 10.8612C4.68949 10.6619 4.68949 10.3382 4.88882 10.1389L8.02765 7.00004L4.88882 3.86121C4.68949 3.66188 4.68949 3.33821 4.88882 3.13888Z"
-                  fill="#5C5C5C"
-                />
-              </svg>
+              <SlashIcon v-if="separator === 'slash'" :size="16" />
+              <ChevronRightIcon v-else :size="16" />
             </slot>
           </span>
           <component
@@ -54,8 +30,15 @@
 </template>
 
 <script>
+import SlashIcon from '../../icons/SlashIcon.vue'
+import ChevronRightIcon from '../../icons/ChevronRightIcon.vue'
+
 export default {
   name: 'Breadcrumb',
+  components: {
+    SlashIcon,
+    ChevronRightIcon
+  },
   props: {
     items: {
       type: Array,

package/src/components/checkbox/Checkbox.vue

@@ -10,19 +10,17 @@
       @change="onChange"
     />
     <span class="ui-checkbox__box" aria-hidden="true">
-      <svg v-if="isChecked" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-        <path
-          d="M11.3055 3.13885C11.5049 2.93952 11.8285 2.93952 12.0279 3.13885C12.2272 3.33818 12.2272 3.66185 12.0279 3.86118L5.61119 10.2778C5.41186 10.4772 5.08819 10.4772 4.88886 10.2778L1.97219 7.36118C1.77286 7.16185 1.77286 6.83818 1.97219 6.63885C2.17152 6.43952 2.49519 6.43952 2.69452 6.63885L5.25002 9.19435L11.3055 3.13885Z"
-          fill="white"
-        />
-      </svg>
+      <CheckIcon v-if="isChecked" :size="16" />
     </span>
   </span>
 </template>
 
 <script>
+import CheckIcon from '../../icons/CheckIcon.vue'
+
 export default {
   name: 'Checkbox',
+  components: { CheckIcon },
   inheritAttrs: false,
   model: { prop: 'checked', event: 'change' },
   props: {

package/src/components/checkbox/checkbox.css

@@ -26,8 +26,6 @@
 
 .ui-checkbox__box {
   position: absolute;
-  top: 1px;
-  left: 1px;
   width: 16px;
   height: 16px;
   display: inline-flex;

package/src/components/dialog/Dialog.vue

@@ -40,18 +40,8 @@
                     :aria-label="minimized ? 'Restore' : 'Minimize'"
                     @click="toggleMinimize"
                   >
-                    <svg
-                      v-if="!minimized"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                      aria-hidden="true"
-                    >
-                      <path d="M5 10h10" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
-                    </svg>
-                    <svg v-else viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                      <rect x="4" y="5" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.75" />
-                    </svg>
+                    <MinusIcon v-if="!minimized" />
+                    <UnfoldVerticalIcon v-else />
                   </button>
                   <button
                     v-if="fullscreen"
@@ -60,46 +50,8 @@
                     :aria-label="isFullscreen ? 'Exit fullscreen' : 'Fullscreen'"
                     @click="toggleFullscreen"
                   >
-                    <svg
-                      v-if="!isFullscreen"
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="1.75"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      class="lucide lucide-expand-icon lucide-expand"
-                    >
-                      <path d="m15 15 6 6" />
-                      <path d="m15 9 6-6" />
-                      <path d="M21 16v5h-5" />
-                      <path d="M21 8V3h-5" />
-                      <path d="M3 16v5h5" />
-                      <path d="m3 21 6-6" />
-                      <path d="M3 8V3h5" />
-                      <path d="M9 9 3 3" />
-                    </svg>
-                    <svg
-                      v-else
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="1.75"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      class="lucide lucide-shrink-icon lucide-shrink"
-                    >
-                      <path d="m15 15 6 6m-6-6v4.8m0-4.8h4.8" />
-                      <path d="M9 19.8V15m0 0H4.2M9 15l-6 6" />
-                      <path d="M15 4.2V9m0 0h4.8M15 9l6-6" />
-                      <path d="M9 4.2V9m0 0H4.2M9 9 3 3" />
-                    </svg>
+                    <ExpandIcon v-if="!isFullscreen" />
+                    <ShrinkIcon v-else />
                   </button>
                   <button
                     v-if="closable"
@@ -108,12 +60,7 @@
                     aria-label="Close"
                     @click="handleCancel"
                   >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                      <path
-                        d="M14.4841 4.48408C14.7688 4.19932 15.2312 4.19932 15.516 4.48408C15.8007 4.76883 15.8007 5.23122 15.516 5.51598L11.0319 10L15.516 14.4841C15.8007 14.7688 15.8007 15.2312 15.516 15.516C15.2312 15.8007 14.7688 15.8007 14.4841 15.516L10 11.0319L5.51598 15.516C5.23122 15.8007 4.76883 15.8007 4.48408 15.516C4.19932 15.2312 4.19932 14.7688 4.48408 14.4841L8.96813 10L4.48408 5.51598C4.19932 5.23122 4.19932 4.76883 4.48408 4.48408C4.76883 4.19932 5.23122 4.19932 5.51598 4.48408L10 8.96813L14.4841 4.48408Z"
-                        fill="#171717"
-                      />
-                    </svg>
+                    <XIcon />
                   </button>
                 </div>
               </div>
@@ -147,10 +94,15 @@
 
 <script>
 import Button from '../button/Button.vue'
+import MinusIcon from '../../icons/MinusIcon.vue'
+import UnfoldVerticalIcon from '../../icons/UnfoldVerticalIcon.vue'
+import ExpandIcon from '../../icons/ExpandIcon.vue'
+import ShrinkIcon from '../../icons/ShrinkIcon.vue'
+import XIcon from '../../icons/XIcon.vue'
 
 export default {
   name: 'Dialog',
-  components: { Button },
+  components: { Button, MinusIcon, UnfoldVerticalIcon, ExpandIcon, ShrinkIcon, XIcon },
   model: { prop: 'open', event: 'change' },
   props: {
     open: { type: Boolean, default: false },

package/src/components/pagination/Pagination.vue

@@ -2,15 +2,7 @@
   <nav class="ui-pagination" role="navigation" :aria-label="ariaLabel" :class="{ 'ui-pagination--disabled': disabled }">
     <Button variant="ghost" :disabled="isPrevDisabled" @click="goPrev" :label="prevLabel || ''">
       <template v-if="showIcon" #icon-left>
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-          <path
-            d="M10 4L6 8L10 12"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
+        <ChevronLeftIcon />
       </template>
     </Button>
 
@@ -32,37 +24,14 @@
         @click="onEllipsisClick(item)"
       >
         <template #icon>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="lucide lucide-ellipsis-icon lucide-ellipsis"
-          >
-            <circle cx="12" cy="12" r="1" />
-            <circle cx="19" cy="12" r="1" />
-            <circle cx="5" cy="12" r="1" />
-          </svg>
+          <EllipsisIcon />
         </template>
       </Button>
     </template>
 
     <Button variant="ghost" :disabled="isNextDisabled" @click="goNext" :label="nextLabel || ''">
       <template v-if="showIcon" #icon-right>
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-          <path
-            d="M6 4L10 8L6 12"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
+        <ChevronRightIcon />
       </template>
     </Button>
   </nav>
@@ -70,6 +39,9 @@
 
 <script>
 import Button from '../button/Button.vue'
+import ChevronLeftIcon from '../../icons/ChevronLeftIcon.vue'
+import ChevronRightIcon from '../../icons/ChevronRightIcon.vue'
+import EllipsisIcon from '../../icons/EllipsisIcon.vue'
 
 function range(start, end) {
   if (end < start) return []
@@ -80,7 +52,7 @@ function range(start, end) {
 
 export default {
   name: 'Pagination',
-  components: { Button },
+  components: { Button, ChevronLeftIcon, ChevronRightIcon, EllipsisIcon },
 
   model: {
     prop: 'current',

package/src/components/select/Select.vue

@@ -28,28 +28,12 @@
 
     <spinner v-if="loading" type="mirrored" size="sm" />
     <span v-else class="ui-select__chevron">
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M4 6L8 10L12 6"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
+      <ChevronDownIcon :size="16" />
     </span>
 
     <div ref="dropdown" v-show="isOpen" class="ui-select__dropdown" :style="dropdownStyle" @click.stop>
       <div v-if="canScrollUp" class="ui-select__scroll-indicator ui-select__scroll-indicator--up">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-          <path
-            d="M4 10L8 6L12 10"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
+        <ChevronUpIcon :size="16" />
       </div>
       <div
         ref="options"
@@ -68,28 +52,22 @@
         </slot>
       </div>
       <div v-if="canScrollDown" class="ui-select__scroll-indicator ui-select__scroll-indicator--down">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-          <path
-            d="M4 6L8 10L12 6"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
+        <ChevronDownIcon :size="16" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import ChevronDownIcon from '../../icons/ChevronDownIcon.vue'
+import ChevronUpIcon from '../../icons/ChevronUpIcon.vue'
 import SelectOption from '../select-option/SelectOption.vue'
 import Spinner from '../spinner/Spinner.vue'
 
 export default {
   name: 'Select',
 
-  components: { SelectOption, Spinner },
+  components: { SelectOption, Spinner, ChevronDownIcon, ChevronUpIcon },
 
   provide() {
     return { select: this }
@@ -105,7 +83,7 @@ export default {
       type: String,
       default: 'default',
       validator: function (v) {
-        return ['mini', 'sm', 'default', 'lg'].includes(v)
+        return ['xs', 'sm', 'default', 'lg'].includes(v)
       }
     },
     value: {

package/src/components/select/select.css

@@ -148,17 +148,17 @@
   gap: var(--spacing-6);
 }
 
-.ui-select--mini {
+.ui-select--xs {
   min-height: 28px;
   padding: var(--spacing-2xs) var(--spacing-6);
   gap: var(--spacing-2xs);
   border-radius: var(--rounded-lg);
 }
-.ui-select--mini .ui-select__left {
+.ui-select--xs .ui-select__left {
   gap: var(--spacing-2xs);
 }
-.ui-select--mini .ui-select__value,
-.ui-select--mini .ui-select__prepend {
+.ui-select--xs .ui-select__value,
+.ui-select--xs .ui-select__prepend {
   font-size: var(--paragraph-mini-font-size);
   line-height: var(--paragraph-mini-line-height);
 }

package/src/components/sidebar-group-label/SidebarGroupLabel.vue

@@ -16,15 +16,7 @@
         ><slot>{{ label }}</slot></span
       >
       <span class="ui-sidebar-group-label__chevron" aria-hidden="true">
-        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-          <path
-            d="M3 4.5L6 7.5L9 4.5"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
+        <ChevronDownIcon :size="16" />
       </span>
     </button>
     <span v-else class="ui-sidebar-group-label__text"
@@ -37,9 +29,12 @@
 </template>
 
 <script>
+import ChevronDownIcon from '../../icons/ChevronDownIcon.vue'
 export default {
   name: 'SidebarGroupLabel',
-
+  components: {
+    ChevronDownIcon
+  },
   props: {
     label: {
       type: String,

package/src/components/spinner/Spinner.vue

@@ -1,25 +1,16 @@
 <template>
   <span class="ui-spinner" :class="[`ui-spinner--${size}`, `ui-spinner--${type}`]" role="status" :aria-label="label">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.75"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="lucide lucide-loader-circle-icon lucide-loader-circle ui-spinner__svg"
-    >
-      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-    </svg>
+    <LoaderCircleIcon class="ui-spinner__svg" />
   </span>
 </template>
 
 <script>
+import LoaderCircleIcon from '../../icons/LoaderCircleIcon.vue'
 export default {
   name: 'Spinner',
+  components: {
+    LoaderCircleIcon
+  },
   props: {
     size: {
       type: String,

package/src/components/tabs/Tabs.vue

@@ -34,7 +34,7 @@ export default {
       type: String,
       default: 'sm',
       validator: function (v) {
-        return ['mini', 'sm', 'md', 'lg'].includes(v)
+        return ['xs', 'sm', 'md', 'lg'].includes(v)
       }
     }
   },

package/src/components/tabs/tabs.css

@@ -7,7 +7,7 @@
   box-sizing: border-box;
 }
 
-.ui-tabs--mini {
+.ui-tabs--xs {
   padding: 2px;
 }
 .ui-tabs--md {
@@ -65,7 +65,7 @@
 }
 
 /* — sizes — */
-.ui-tabs--mini .ui-tabs__item {
+.ui-tabs--xs .ui-tabs__item {
   height: 20px;
   padding: 0 6px;
   font-size: var(--paragraph-mini-font-size);
@@ -91,7 +91,7 @@
   flex-shrink: 0;
 }
 
-.ui-tabs--mini .ui-tabs__icon {
+.ui-tabs--xs .ui-tabs__icon {
   width: 12px;
   height: 12px;
 }

package/src/icons/CheckIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'CheckIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/ChevronDownIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ChevronDownIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/ChevronLeftIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="m15 18-6-6 6-6" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ChevronLeftIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/ChevronRightIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ChevronRightIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/ChevronUpIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="m18 15-6-6-6 6" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ChevronUpIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/CircleXIcon.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="m15 9-6 6" />
+    <path d="m9 9 6 6" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'CircleXIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/EllipsisIcon.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <circle cx="12" cy="12" r="1" />
+    <circle cx="19" cy="12" r="1" />
+    <circle cx="5" cy="12" r="1" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'EllipsisIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/ExpandIcon.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="m15 15 6 6" />
+    <path d="m15 9 6-6" />
+    <path d="M21 16v5h-5" />
+    <path d="M21 8V3h-5" />
+    <path d="M3 16v5h5" />
+    <path d="m3 21 6-6" />
+    <path d="M3 8V3h5" />
+    <path d="M9 9 3 3" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ExpandIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/LoaderCircleIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'LoaderCircleIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/LoaderIcon.vue

@@ -1,22 +1,36 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
+    class="ui-icon"
+    :width="size"
+    :height="size"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
-    stroke-width="1.75"
     stroke-linecap="round"
     stroke-linejoin="round"
-    class="lucide lucide-loader-circle-icon lucide-loader-circle"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
   >
-    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    <path d="M12 2v4" />
+    <path d="m16.2 7.8 2.9-2.9" />
+    <path d="M18 12h4" />
+    <path d="m16.2 16.2 2.9 2.9" />
+    <path d="M12 18v4" />
+    <path d="m4.9 19.1 2.9-2.9" />
+    <path d="M2 12h4" />
+    <path d="m4.9 4.9 2.9 2.9" />
   </svg>
 </template>
 
 <script>
 export default {
-  name: 'LoaderIcon'
+  name: 'LoaderIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
 }
 </script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/MinusIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="M5 12h14" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'MinusIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/PlusIcon.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="M5 12h14" />
+    <path d="M12 5v14" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'PlusIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/SearchIcon.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.3-4.3" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SearchIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/ShrinkIcon.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="m15 15 6 6m-6-6v4.8m0-4.8h4.8" />
+    <path d="M9 19.8V15m0 0H4.2M9 15l-6 6" />
+    <path d="M15 4.2V9m0 0h4.8M15 9l6-6" />
+    <path d="M9 4.2V9m0 0H4.2M9 9 3 3" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ShrinkIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/SlashIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="M22 2 2 22" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SlashIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/UnfoldVerticalIcon.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="M12 22v-6" />
+    <path d="M12 8V2" />
+    <path d="M4 12H2" />
+    <path d="M10 12H8" />
+    <path d="M16 12h-2" />
+    <path d="M22 12h-2" />
+    <path d="m15 19-3 3-3-3" />
+    <path d="m15 5-3-3-3 3" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'UnfoldVerticalIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/XIcon.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    class="ui-icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label || undefined"
+  >
+    <path d="M18 6 6 18" />
+    <path d="m6 6 12 12" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'XIcon',
+  props: {
+    size: { type: Number, default: 20 },
+    label: { type: String, default: '' }
+  },
+  emits: []
+}
+</script>
+
+<style src="./icon.css" scoped></style>

package/src/icons/icon.css

@@ -0,0 +1,7 @@
+.ui-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: middle;
+  color: currentColor;
+  stroke-width: 1.75;
+}