@veritree/ui 0.70.0 → 0.73.0

package/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  parserOptions: {
+    parser: '@babel/eslint-parser',
+    requireConfigFile: false,
+  },
+  extends: ['plugin:nuxt/recommended', 'prettier'],
+  plugins: [],
+  // add your custom rules here
+  rules: {
+    camelcase: 'off',
+  },
+};

package/.vscode/settings.json

@@ -1 +1,19 @@
-{}
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": false,
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.tabSize": 2
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.tabSize": 2
+  },
+  "editor.tabSize": 2,
+  "prettier.tabWidth": 2,
+  "typescript.validate.enable": false,
+  "javascript.validate.enable": false
+}

package/index.js

@@ -1,167 +1,30 @@
-import VTAlert from './src/components/Alert/VTAlert.vue';
-import VTAvatar from './src/components/Avatar/VTAvatar.vue';
-import VTAvatarImage from './src/components/Avatar/VTAvatarImage.vue';
-import VTAvatarText from './src/components/Avatar/VTAvatarText.vue';
-import VTButton from './src/components/Button/VTButton.vue';
-import VTChip from './src/components/Chip/VTChip.vue';
-import VTImage from './src/components/Image/VTImage.vue';
-import VTImageCounter from './src/components/Image/VTImageCounter.vue';
-import VTImageHover from './src/components/Image/VTImageHover.vue';
-import VTDropdownMenu from './src/components/DropdownMenu/VTDropdownMenu.vue';
-import VTDropdownMenuContent from './src/components/DropdownMenu/VTDropdownMenuContent.vue';
-import VTDropdownMenuDivider from './src/components/DropdownMenu/VTDropdownMenuDivider.vue';
-import VTDropdownMenuGroup from './src/components/DropdownMenu/VTDropdownMenuGroup.vue';
-import VTDropdownMenuItem from './src/components/DropdownMenu/VTDropdownMenuItem.vue';
-import VTDropdownMenuLabel from './src/components/DropdownMenu/VTDropdownMenuLabel.vue';
-import VTDropdownMenuTrigger from './src/components/DropdownMenu/VTDropdownMenuTrigger.vue';
-import VTPopover from './src/components/Popover/VTPopover.vue';
-import VTPopoverContent from './src/components/Popover/VTPopoverContent.vue';
-import VTPopoverDivider from './src/components/Popover/VTPopoverDivider.vue';
-import VTPopoverGroup from './src/components/Popover/VTPopoverGroup.vue';
-import VTPopoverItem from './src/components/Popover/VTPopoverItem.vue';
-import VTPopoverTrigger from './src/components/Popover/VTPopoverTrigger.vue';
-import VTForm from './src/components/Form/VTForm.vue';
-import VTFormRow from './src/components/Form/VTFormRow.vue';
-import VTFormCol from './src/components/Form/VTFormCol.vue';
-import VTFieldset from './src/components/Form/VTFieldset.vue';
-import VTLegend from './src/components/Form/VTLegend.vue';
-import VTFormFeedback from './src/components/Form/VTFormFeedback.vue';
-import VTFormGroup from './src/components/Form/VTFormGroup.vue';
-import VTInput from './src/components/Form/VTInput.vue';
-import VTInputIcon from './src/components/Form/VTInputIcon.vue';
-import VTInputPassword from './src/components/Form/VTInputPassword.vue';
-import VTListbox from './src/components/Listbox/VTListbox.vue';
-import VTListboxContent from './src/components/Listbox/VTListboxContent.vue';
-import VTListboxDivider from './src/components/Listbox/VTListboxDivider.vue';
-import VTListboxGroup from './src/components/Listbox/VTListboxGroup.vue';
-import VTListboxItem from './src/components/Listbox/VTListboxItem.vue';
-import VTListboxLabel from './src/components/Listbox/VTListboxLabel.vue';
-import VTListboxList from './src/components/Listbox/VTListboxList.vue';
-import VTListboxSearch from './src/components/Listbox/VTListboxSearch.vue';
-import VTListboxTrigger from './src/components/Listbox/VTListboxTrigger.vue';
-import VTListboxViewport from './src/components/Listbox/VTListboxViewport.vue';
-import VTListboxPlaceholder from './src/components/Listbox/VTListboxPlaceholder.vue';
-import VTSpinner from './src/components/Spinner/VTSpinner.vue';
-import VTInputDate from './src/components/Input/VTInputDate.vue';
-import VTInputFile from './src/components/Input/VTInputFile.vue';
-import VTInputUpload from './src/components/Input/VTInputUpload.vue';
-import VTProgressBar from './src/components/ProgressBar/VTProgressBar.vue';
-import VTTextarea from './src/components/Textarea/VTTextarea.vue';
-import VTModal from './src/components/Modal/VTModal.vue';
-import VTTab from './src/components/Tabs/VTTab.vue';
-import VTTabGroup from './src/components/Tabs/VTTabGroup.vue';
-import VTTabList from './src/components/Tabs/VTTabList.vue';
-import VTTabPanel from './src/components/Tabs/VTTabPanel.vue';
-import VTTabPanels from './src/components/Tabs/VTTabPanels.vue';
-import VTDialog from './src/components/Dialog/VTDialog.vue';
-import VTDialogClose from './src/components/Dialog/VTDialogClose.vue';
-import VTDialogContent from './src/components/Dialog/VTDialogContent.vue';
-import VTDialogFooter from './src/components/Dialog/VTDialogFooter.vue';
-import VTDialogHeader from './src/components/Dialog/VTDialogHeader.vue';
-import VTDialogMain from './src/components/Dialog/VTDialogMain.vue';
-import VTDialogOverlay from './src/components/Dialog/VTDialogOverlay.vue';
-import VTDialogTitle from './src/components/Dialog/VTDialogTitle.vue';
-import VTDrawer from './src/components/Drawer/VTDrawer.vue';
-import VTDrawerClose from './src/components/Drawer/VTDrawerClose.vue';
-import VTDrawerContent from './src/components/Drawer/VTDrawerContent.vue';
-import VTDrawerFooter from './src/components/Drawer/VTDrawerFooter.vue';
-import VTDrawerHeader from './src/components/Drawer/VTDrawerHeader.vue';
-import VTDrawerTitle from './src/components/Drawer/VTDrawerTitle.vue';
-import VTDrawerMain from './src/components/Drawer/VTDrawerMain.vue';
-import VTDrawerOverlay from './src/components/Drawer/VTDrawerOverlay.vue';
-import VTDisclosure from './src/components/Disclosure/VTDisclosure.vue';
-import VTDisclosureDetails from './src/components/Disclosure/VTDisclosureDetails.vue';
-import VTDisclosureHeader from './src/components/Disclosure/VTDisclosureHeader.vue';
-import VTDisclosureIcon from './src/components/Disclosure/VTDisclosureIcon.vue';
-import VTDisclosureContent from './src/components/Disclosure/VTDisclosureContent.vue';
-import VTSkeleton from './src/components/Skeleton/VTSkeleton.vue';
-import VTSkeletonItem from './src/components/Skeleton/VTSkeletonItem.vue';
-import VTCarousel from './src/components/Carousel/VTCarousel.vue';
-import VTCarouselBackward from './src/components/Carousel/VTCarouselBackward.vue';
-import VTCarouselForward from './src/components/Carousel/VTCarouselForward.vue';
-import VTCarouselTracker from './src/components/Carousel/VTCarouselTracker.vue';
+/**
+ * Dynamically imports all Vue components from the specified directory and its subdirectories.
+ *
+ * @param {Function} r - The require.context function.
+ * @returns {Object} An object containing all imported Vue components, where the keys are the component names.
+ */
+function importAll(r) {
+  const components = {};
 
-export {
-  VTAvatar,
-  VTAvatarImage,
-  VTAvatarText,
-  VTImage,
-  VTImageCounter,
-  VTImageHover,
-  VTAlert,
-  VTSpinner,
-  VTDropdownMenu,
-  VTDropdownMenuContent,
-  VTDropdownMenuDivider,
-  VTDropdownMenuGroup,
-  VTDropdownMenuItem,
-  VTDropdownMenuLabel,
-  VTDropdownMenuTrigger,
-  VTPopover,
-  VTPopoverContent,
-  VTPopoverDivider,
-  VTPopoverGroup,
-  VTPopoverItem,
-  VTPopoverTrigger,
-  VTForm,
-  VTFormCol,
-  VTFormFeedback,
-  VTFormGroup,
-  VTFormRow,
-  VTFieldset,
-  VTLegend,
-  VTListbox,
-  VTListboxContent,
-  VTListboxDivider,
-  VTListboxGroup,
-  VTListboxItem,
-  VTListboxLabel,
-  VTListboxList,
-  VTListboxSearch,
-  VTListboxTrigger,
-  VTListboxPlaceholder,
-  VTListboxViewport,
-  VTButton,
-  VTInput,
-  VTInputIcon,
-  VTInputPassword,
-  VTInputDate,
-  VTInputFile,
-  VTInputUpload,
-  VTProgressBar,
-  VTTextarea,
-  VTModal,
-  VTTab,
-  VTTabGroup,
-  VTTabList,
-  VTTabPanel,
-  VTTabPanels,
-  VTDrawer,
-  VTDrawerClose,
-  VTDrawerContent,
-  VTDrawerFooter,
-  VTDrawerHeader,
-  VTDrawerTitle,
-  VTDrawerMain,
-  VTDrawerOverlay,
-  VTDialog,
-  VTDialogClose,
-  VTDialogContent,
-  VTDialogFooter,
-  VTDialogHeader,
-  VTDialogMain,
-  VTDialogOverlay,
-  VTDialogTitle,
-  VTDisclosure,
-  VTDisclosureDetails,
-  VTDisclosureHeader,
-  VTDisclosureIcon,
-  VTDisclosureContent,
-  VTSkeleton,
-  VTSkeletonItem,
-  VTChip,
-  VTCarousel,
-  VTCarouselBackward,
-  VTCarouselForward,
-  VTCarouselTracker
-};
+  r.keys().forEach((key) => {
+    const componentName = key.replace(/^.+\/([^/]+)\.vue$/, '$1');
+    components[componentName] = r(key).default;
+  });
+
+  return components;
+}
+
+/**
+ * The components object containing all imported Vue components.
+ *
+ * @type {Object}
+ */
+const components = importAll(
+  require.context('./src/components/', true, /\.vue$/),
+);
+
+// Export each component individually
+Object.entries(components).forEach(([componentName, component]) => {
+  module.exports[componentName] = component;
+});

package/nuxt.js

@@ -3,6 +3,7 @@ import { join } from 'path';
 const components = [
   'src/components/Alert',
   'src/components/Avatar',
+  'src/components/Badge',
   'src/components/Button',
   'src/components/Carousel',
   'src/components/Chip',
@@ -19,6 +20,8 @@ const components = [
   'src/components/Spinner',
   'src/components/Tabs',
   'src/components/Tooltip',
+  'src/components/Switch',
+  'src/components/Separator',
 ];
 
 export default function () {

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@veritree/ui",
-  "version": "0.70.0",
+  "version": "0.73.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
   "repository": "https://github.com/tentree-org/veritree-ui.git",
   "author": "cyroveritree <cyro@veritree.com>",
-  "license": "MIT",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
@@ -21,9 +20,18 @@
     "@veritree/icons": "^0.60.0"
   },
   "devDependencies": {
-    "np": "^8.0.4",
-    "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.13",
+    "@babel/eslint-parser": "^7.23.10",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "jsdom": "^24.0.0",
+    "np": "^10.0.2",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.12",
+    "stylelint": "^16.2.1",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard": "^36.0.0",
     "tailwindcss": "^3.4.1"
   },
   "engines": {

package/src/components/Badge/VTBadgeNew.vue

@@ -0,0 +1,13 @@
+<template>
+  <span
+    class="ml-auto flex min-w-5 place-content-center rounded-xl bg-gray-800 p-1 text-xs leading-none text-white"
+  >
+    <slot />
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'VTBadgeNew',
+};
+</script>

package/src/components/Breadcrumb/VTBreadcrumbItem.vue

@@ -0,0 +1,11 @@
+<template>
+  <li>
+    <slot />
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'BreadcrumbItem',
+};
+</script>

package/src/components/Breadcrumb/VTBreadcrumbLink.vue

@@ -0,0 +1,28 @@
+<template>
+  <component :is="as" :href="href" :to="to" class="link-base link-underlined">
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'BreadcrumbLink',
+
+  props: {
+    href: {
+      type: String,
+      default: null,
+    },
+    to: {
+      type: String,
+      default: null,
+    },
+  },
+
+  computed: {
+    as() {
+      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+    },
+  },
+};
+</script>

package/src/components/Breadcrumb/VTBreadcrumbList.vue

@@ -0,0 +1,11 @@
+<template>
+  <ol class="flex gap-0.5 font-medium">
+    <slot />
+  </ol>
+</template>
+
+<script>
+export default {
+  name: 'BreadcrumbList',
+};
+</script>

package/src/components/Breadcrumb/VTBreadcrumbRoot.vue

@@ -0,0 +1,11 @@
+<template>
+  <nav aria-label="breadcrumb">
+    <slot />
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'BreadcrumbRoot',
+};
+</script>

package/src/components/Breadcrumb/VTBreadcrumbSeparator.vue

@@ -0,0 +1,19 @@
+<template>
+  <li>
+    <slot>
+      <IconChevronRight />
+    </slot>
+  </li>
+</template>
+
+<script>
+import { IconChevronRight } from '@veritree/icons';
+
+export default {
+  name: 'BreadcrumbSeparator',
+
+  components: {
+    IconChevronRight,
+  },
+};
+</script>

package/src/components/Button/VTButton.vue

@@ -11,36 +11,36 @@
       headless
         ? 'button'
         : isIcon
-        ? 'relative inline-flex items-center justify-center rounded-full [&_svg]:max-h-full [&_svg]:max-w-full'
-        : 'relative inline-flex rounded border border-solid px-4 text-sm font-semibold leading-none no-underline transition-all',
+          ? 'relative inline-flex items-center justify-center rounded-full [&_svg]:max-h-full [&_svg]:max-w-full'
+          : 'relative inline-flex rounded border border-solid px-4 text-sm font-semibold leading-none no-underline transition-all',
       // variant styles
       headless
         ? `button--${variant}`
         : isPrimary
-        ? 'bg-secondary-400 hover:bg-secondary-500 focus:bg-secondary-600 active:bg-secondary-600 border-transparent text-white disabled:bg-gray-200 disabled:text-gray-400'
-        : isSecondary
-        ? isGhost
-          ? 'border-gray-500 text-gray-100 hover:bg-white hover:text-gray-700'
-          : 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 focus:bg-gray-200 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
-        : isTertiary
-        ? 'border-transparent text-gray-600 hover:text-gray-800 focus:text-gray-800 active:text-gray-800 disabled:text-gray-400'
-        : isDark
-        ? 'border-transparent bg-gray-800 text-white hover:bg-gray-700 active:bg-gray-600 disabled:bg-gray-200 disabled:text-gray-400'
-        : isIcon
-        ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300 disabled:bg-gray-200 disabled:text-gray-400'
-        : null,
+          ? 'bg-secondary-400 hover:bg-secondary-500 focus:bg-secondary-600 active:bg-secondary-600 border-transparent text-white disabled:bg-gray-200 disabled:text-gray-400'
+          : isSecondary
+            ? isGhost
+              ? 'border-gray-500 text-gray-100 hover:bg-white hover:text-gray-700'
+              : 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 focus:bg-gray-200 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
+            : isTertiary
+              ? 'border-transparent text-gray-600 hover:text-gray-800 focus:text-gray-800 active:text-gray-800 disabled:text-gray-400'
+              : isDark
+                ? 'border-transparent bg-gray-800 text-white hover:bg-gray-700 active:bg-gray-600 disabled:bg-gray-200 disabled:text-gray-400'
+                : isIcon
+                  ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300 disabled:bg-gray-200 disabled:text-gray-400'
+                  : null,
       // sizes styles
       headless
         ? `button--${size}`
         : isLarge
-        ? isIcon
-          ? 'h-8 w-8'
-          : 'h-10'
-        : isSmall
-        ? isIcon
-          ? 'h-6 w-6 p-1'
-          : 'h-8'
-        : null,
+          ? isIcon
+            ? 'h-8 w-8'
+            : 'h-10'
+          : isSmall
+            ? isIcon
+              ? 'h-6 w-6 p-1'
+              : 'h-8'
+            : null,
       isDisabled ? (isIcon ? '[&_svg]:text-gray-400' : null) : null,
     ]"
     v-on="$listeners"

package/src/components/Dialog/VTDialogContent.vue

@@ -15,7 +15,7 @@
       :class="
         headless
           ? 'dialog-content'
-          : `relative m-auto flex flex-col overflow-auto rounded bg-white px-4 focus:outline-none lg:px-6 ${classes}`
+          : `relative m-auto flex flex-col overflow-auto rounded bg-white px-4 focus:outline-none md:px-6 ${classes}`
       "
       tabindex="-1"
       @keydown.esc.stop="onEsc"

package/src/components/Disclosure/VTDisclosureContent.vue

@@ -10,8 +10,8 @@
           ? 'details-content--expanded'
           : null
         : expanded
-        ? 'grid-rows-[1fr]'
-        : 'grid-rows-[0fr]',
+          ? 'grid-rows-[1fr]'
+          : 'grid-rows-[0fr]',
     ]"
   >
     <div :class="[headless ? 'detail-content__overflow' : 'overflow-hidden']">

package/src/components/Listbox/VTListboxTriggerHighlight.vue

@@ -9,39 +9,21 @@
             ? 'listbox-highlight--active'
             : null
           : isActive
-          ? '[&>*]:border-gray-700'
-          : null,
+            ? '[&>*]:border-gray-700'
+            : null,
       ]"
     >
       <slot />
     </div>
-    <Portal>
-      <span
-        :id="counterId"
-        v-show="isBadgeVisible"
-        :class="[
-          headless
-            ? 'listbox-highlight__badge'
-            : 'absolute z-40 grid h-5 min-w-[20px] place-content-center rounded-full bg-gray-800 text-xs font-medium text-white',
-        ]"
-      >
-        {{ computedValueLength }}
-      </span>
-    </Portal>
   </div>
 </template>
 
 <script>
-import { Portal } from '@linusborg/vue-simple-portal';
 import { computePosition, offset, autoUpdate } from '@floating-ui/dom';
 
 export default {
   name: 'VTListboxHighlight',
 
-  components: {
-    Portal,
-  },
-
   inject: ['apiListbox'],
 
   props: {
@@ -153,72 +135,72 @@ export default {
         : this.defaultValue !== this.computedValue;
     },
 
-    /**
-     * Checks if the badge should be visible for the listbox item.
-     *
-     * @property
-     * @name isBadgeVisible
-     * @memberof VTListboxTriggerHighlight
-     * @description Checks if the badge should be visible for the listbox item.
-     * @returns {boolean} True if the badge should be visible, false otherwise.
-     */
-    isBadgeVisible() {
-      return this.isValueAnArray && this.isActive;
-    },
+    // /**
+    //  * Checks if the badge should be visible for the listbox item.
+    //  *
+    //  * @property
+    //  * @name isBadgeVisible
+    //  * @memberof VTListboxTriggerHighlight
+    //  * @description Checks if the badge should be visible for the listbox item.
+    //  * @returns {boolean} True if the badge should be visible, false otherwise.
+    //  */
+    // isBadgeVisible() {
+    //   return this.isValueAnArray && this.isActive;
+    // },
   },
 
-  mounted() {
-    this.$nextTick(() => this.positionFloatingContent());
-  },
-
-  methods: {
-    /**
-     * Positions the floating content relative to a specified trigger element.
-     *
-     * @function
-     * @name positionFloatingContent
-     * @description Calculates and updates the position of the floating content
-     *              based on the position of the reference element.
-     * @returns {void}
-     */
-    positionFloatingContent() {
-      /**
-       * The reference element that triggers the positioning of the floating content.
-       * @type {HTMLElement}
-       */
-      const referenceElement = document.getElementById(this.highlightId);
-
-      /**
-       * The floating element whose position needs to be updated.
-       * @type {HTMLElement}
-       */
-      const floatingElement = document.getElementById(this.counterId);
-
-      /**
-       * Callback function to update the position of the floating element
-       * using the autoUpdate and computePosition utilities.
-       * @type {Function}
-       */
-      const updatePositionCallback = () => {
-        computePosition(referenceElement, floatingElement, {
-          placement: 'top-end',
-          middleware: [
-            offset({
-              alignmentAxis: -10,
-              mainAxis: -10,
-            }),
-          ],
-        }).then(({ x, y }) => {
-          Object.assign(floatingElement.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          });
-        });
-      };
-
-      // Call the autoUpdate function with the specified elements and callback.
-      autoUpdate(referenceElement, floatingElement, updatePositionCallback);
-    },
-  },
+  // mounted() {
+  //   this.$nextTick(() => this.positionFloatingContent());
+  // },
+
+  // methods: {
+  //   /**
+  //    * Positions the floating content relative to a specified trigger element.
+  //    *
+  //    * @function
+  //    * @name positionFloatingContent
+  //    * @description Calculates and updates the position of the floating content
+  //    *              based on the position of the reference element.
+  //    * @returns {void}
+  //    */
+  //   positionFloatingContent() {
+  //     /**
+  //      * The reference element that triggers the positioning of the floating content.
+  //      * @type {HTMLElement}
+  //      */
+  //     const referenceElement = document.getElementById(this.highlightId);
+
+  //     /**
+  //      * The floating element whose position needs to be updated.
+  //      * @type {HTMLElement}
+  //      */
+  //     const floatingElement = document.getElementById(this.counterId);
+
+  //     /**
+  //      * Callback function to update the position of the floating element
+  //      * using the autoUpdate and computePosition utilities.
+  //      * @type {Function}
+  //      */
+  //     const updatePositionCallback = () => {
+  //       computePosition(referenceElement, floatingElement, {
+  //         placement: 'top-end',
+  //         middleware: [
+  //           offset({
+  //             alignmentAxis: -10,
+  //             mainAxis: -10,
+  //           }),
+  //         ],
+  //       }).then(({ x, y }) => {
+  //         Object.assign(floatingElement.style, {
+  //           left: `${x}px`,
+  //           top: `${y}px`,
+  //         });
+  //       });
+  //     };
+
+  //     // Call the autoUpdate function with the specified elements and callback.
+  //     autoUpdate(referenceElement, floatingElement, updatePositionCallback);
+  //   },
+  // },
 };
 </script>

package/src/components/Popover/VTPopoverDivider.vue

@@ -2,7 +2,7 @@
   <div
     :class="{
       'popover-divider': headless,
-      '-mx-3 my-2 h-[1px]': !headless,
+      '-mx-3 my-2 h-[1px] bg-gray-200': !headless,
     }"
   ></div>
 </template>

package/src/components/Separator/VTSeparator.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="h-px bg-border bg-gray-200 shrink-0 w-full"
+    data-orientation="horizontal"
+    role="separator"
+  />
+</template>
+
+<script>
+export default {
+  name: 'VTSeparator',
+};
+</script>

package/src/components/Switch/VTSwitch.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="relative flex w-11 h-6 px-0.5 items-center">
+    <input
+      ref="input"
+      :checked="checkedComputed"
+      :disabled="disabled"
+      :value="valueComputed"
+      class="absolute inset-0 appearance-none peer rounded-full transition-colors bg-gray-400 checked:bg-secondary-300 disabled:bg-gray-200"
+      role="switch"
+      type="checkbox"
+      @change="onChange"
+    />
+    <span
+      class="size-5 rounded-full bg-white transition-transform translate-x-0 peer-checked:translate-x-full pointer-events-none peer-disabled:bg-gray-400"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'value',
+  },
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: null,
+    },
+    value: {
+      type: [Array, Boolean, Number, String],
+      default: false,
+    },
+  },
+
+  computed: {
+    checkedComputed() {
+      return this.value;
+    },
+
+    valueComputed: {
+      get() {
+        return this.value;
+      },
+      set(newVal) {
+        this.$emit('input', newVal);
+      },
+    },
+  },
+
+  methods: {
+    onChange(event) {
+      this.valueComputed = !Boolean(this.valueComputed);
+      this.$emit('change', event);
+    },
+  },
+};
+</script>

package/stylelint.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  customSyntax: 'postcss-html',
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-recommended-vue',
+    'stylelint-config-prettier',
+  ],
+  // add your custom config here
+  // https://stylelint.io/user-guide/configuration
+  rules: {
+    'selector-class-pattern': null,
+    'selector-anb-no-unmatchable': null,
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+        ],
+      },
+    ],
+  },
+};

package/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

package/test/switch.test.js

@@ -0,0 +1,125 @@
+import { mount } from '@vue/test-utils';
+import VTSwitch from '@/components/Switch/VTSwitch.vue';
+
+describe('VTSwitch.vue', () => {
+  it('renders root div with correct classes', () => {
+    const wrapper = mount(VTSwitch);
+    const rootDiv = wrapper.find('div');
+
+    expect(rootDiv.classes()).toContain(
+      'relative',
+      'flex',
+      'w-11',
+      'h-6',
+      'px-0.5',
+      'items-center',
+    );
+  });
+
+  it('renders checkbox input with correct attributes and classes', () => {
+    const wrapper = mount(VTSwitch);
+    const checkboxInput = wrapper.find('input[type="checkbox"]');
+
+    expect(checkboxInput.classes()).toContain(
+      'absolute',
+      'inset-0',
+      'appearance-none',
+      'peer',
+      'rounded-full',
+      'transition-colors',
+      'bg-gray-400',
+      'checked:bg-secondary-300',
+    );
+  });
+
+  it('renders span element with correct classes', () => {
+    const wrapper = mount(VTSwitch);
+    const spanElement = wrapper.find('span');
+
+    expect(spanElement.classes()).toContain(
+      'size-5',
+      'rounded-full',
+      'bg-white',
+      'transition-transform',
+      'translate-x-0',
+      'peer-checked:translate-x-full',
+      'pointer-events-none',
+    );
+  });
+
+  it('emits change event and updates value when checkbox is toggled', async () => {
+    const wrapper = mount(VTSwitch, {
+      propsData: {
+        value: false,
+      },
+    });
+    const checkboxInput = wrapper.find('input[type="checkbox"]');
+
+    // Simulate a change event on the checkbox input
+    await checkboxInput.trigger('change');
+
+    // Toggle the value prop
+    await wrapper.setProps({ value: !wrapper.props().value });
+
+    expect(wrapper.vm.valueComputed).toBe(true);
+
+    // Verify that the change event is emitted
+    expect(wrapper.emitted()).toHaveProperty('change');
+
+    // Verify that the value prop is updated to true
+    expect(wrapper.props().value).toBe(true);
+  });
+
+  it('updates checkedComputed property when checkbox is toggled', async () => {
+    // Mount the component with value prop set to true
+    const wrapper = mount(VTSwitch, {
+      propsData: {
+        value: false,
+      },
+    });
+
+    // Verify that the checkedComputed computed property is true
+    expect(wrapper.vm.checkedComputed).toBe(false);
+
+    const checkboxInput = wrapper.find('input[type="checkbox"]');
+
+    // Simulate a change event on the checkbox input
+    await checkboxInput.trigger('change');
+
+    // Toggle the value prop
+    await wrapper.setProps({ value: !wrapper.props().value });
+
+    // Verify that the checkedComputed computed property is true
+    expect(wrapper.vm.checkedComputed).toBe(true);
+  });
+
+  it('renders a disabled checkbox when disabled prop is true', async () => {
+    // Mount the component with disabled prop set to true
+    const wrapper = mount(VTSwitch, {
+      propsData: {
+        disabled: true,
+      },
+    });
+
+    // Find the checkbox input element
+    const checkboxInput = wrapper.find('input[type="checkbox"]');
+
+    // Verify that the checkbox is disabled
+    expect(checkboxInput.attributes('disabled')).toBe('disabled');
+  });
+
+  it('renders an enabled checkbox when disabled prop is false', async () => {
+    // Mount the component with disabled prop set to false
+    const wrapper = mount(VTSwitch, {
+      propsData: {
+        disabled: false,
+      },
+    });
+
+    // Find the checkbox input element
+    const checkboxInput = wrapper.find('input[type="checkbox"]');
+
+    // Verify that the checkbox is enabled
+    expect(checkboxInput.attributes('disabled')).toBeUndefined();
+  });
+});