daisy-ui-kit 1.0.7 → 2.0.0

package/components/DropdownTarget.vue

@@ -0,0 +1,5 @@
+<template>
+  <summary>
+    <slot />
+  </summary>
+</template>

package/components/FileInput.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  join?: boolean
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  bordered?: boolean
+  ghost?: boolean
+  disabled?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}
+const props = defineProps<Props>()
+defineEmits(['files'])
+
+const classes = computed(() => {
+  return {
+    'join-item': props.join,
+
+    'file-input-primary': props.primary || props.color === 'primary',
+    'file-input-secondary': props.secondary || props.color === 'secondary',
+    'file-input-accent': props.accent || props.color === 'accent',
+    'file-input-info': props.info || props.color === 'info',
+    'file-input-success': props.success || props.color === 'success',
+    'file-input-warning': props.warning || props.color === 'warning',
+    'file-input-error': props.error || props.color === 'error',
+
+    'file-input-lg': props.lg || props.size === 'lg',
+    'file-input-md': props.md || props.size === 'md',
+    'file-input-sm': props.sm || props.size === 'sm',
+    'file-input-xs': props.xs || props.size === 'xs',
+
+    'file-input-bordered': props.bordered,
+    'file-input-ghost': props.ghost,
+  }
+})
+</script>
+
+<template>
+  <input
+    type="file"
+    :disabled="disabled"
+    class="file-input"
+    :class="classes"
+    @input="$emit('files', ($event.target as any).value)"
+  >
+</template>

package/components/Flex.vue

@@ -3,10 +3,10 @@ import { computed } from 'vue'
 
 interface Props {
   is?: string | Object | Function
+  join?: boolean
 
   // https://tailwindcss.com/docs/flex
   flex?: boolean
-
   flex1?: boolean
   flexAuto?: boolean
   flexInitial?: boolean
@@ -24,56 +24,6 @@ interface Props {
   wrap?: boolean
   nowrap?: boolean
   wrapReverse?: boolean
-
-  // https://tailwindcss.com/docs/align-items
-  alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
-  itemsStart?: boolean
-  itemsEnd?: boolean
-  itemsCenter?: boolean
-  itemsBaseline?: boolean
-  itemsStretch?: boolean
-
-  // https://tailwindcss.com/docs/align-content
-  alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
-  contentStart?: boolean
-  contentEnd?: boolean
-  contentCenter?: boolean
-  contentBetween?: boolean
-  contentAround?: boolean
-  contentEvenly?: boolean
-
-  // https://tailwindcss.com/docs/align-self
-  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline'
-  selfAuto?: boolean
-  selfStart?: boolean
-  selfEnd?: boolean
-  selfCenter?: boolean
-  selfStretch?: boolean
-  selfBaseline?: boolean
-
-  // https://tailwindcss.com/docs/justify-content
-  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
-  justifyStart?: boolean
-  justifyEnd?: boolean
-  justifyCenter?: boolean
-  justifyBetween?: boolean
-  justifyAround?: boolean
-  justifyEvenly?: boolean
-
-  // https://tailwindcss.com/docs/justify-items
-  justifyItems?: 'start' | 'end' | 'center' | 'stretch'
-  justifyItemsStart?: boolean
-  justifyItemsEnd?: boolean
-  justifyItemsCenter?: boolean
-  justifyItemsStretch?: boolean
-
-  // https://tailwindcss.com/docs/justify-self
-  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch'
-  justifySelfAuto?: boolean
-  justifySelfStart?: boolean
-  justifySelfEnd?: boolean
-  justifySelfCenter?: boolean
-  justifySelfStretch?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   is: 'div',
@@ -82,6 +32,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const classes = computed(() => {
   return {
+    'join-item': props.join,
+
     'flex-1': props.flex1,
     'flex-auto': props.flexAuto,
     'flex-initial': props.flexInitial,
@@ -97,44 +49,6 @@ const classes = computed(() => {
     'flex-wrap': props.wrap,
     'flex-wrap-reverse': props.wrapReverse,
     'flex-nowrap': props.nowrap,
-
-    'content-start': props.alignContent === 'start' || props.contentStart,
-    'content-end': props.alignContent === 'end' || props.contentEnd,
-    'content-center': props.alignContent === 'center' || props.contentCenter,
-    'content-between': props.alignContent === 'between' || props.contentBetween,
-    'content-around': props.alignContent === 'around' || props.contentAround,
-    'content-evenly': props.alignContent === 'evenly' || props.contentEvenly,
-
-    'items-start': props.alignItems === 'start' || props.itemsStart,
-    'items-end': props.alignItems === 'end' || props.itemsEnd,
-    'items-center': props.alignItems === 'center' || props.itemsCenter,
-    'items-baseline': props.alignItems === 'baseline' || props.itemsBaseline,
-    'items-stretch': props.alignItems === 'stretch' || props.itemsStretch,
-
-    'self-auto': props.alignSelf === 'auto' || props.selfAuto,
-    'self-start': props.alignSelf === 'start' || props.selfStart,
-    'self-end': props.alignSelf === 'end' || props.selfEnd,
-    'self-center': props.alignSelf === 'center' || props.selfCenter,
-    'self-stretch': props.alignSelf === 'stretch' || props.selfStretch,
-    'self-baseline': props.alignSelf === 'baseline' || props.selfBaseline,
-
-    'justify-start': props.justify === 'start' || props.justifyStart,
-    'justify-end': props.justify === 'end' || props.justifyEnd,
-    'justify-center': props.justify === 'center' || props.justifyCenter,
-    'justify-between': props.justify === 'between' || props.justifyBetween,
-    'justify-around': props.justify === 'around' || props.justifyAround,
-    'justify-evenly': props.justify === 'evenly' || props.justifyEvenly,
-
-    'justify-items-start': props.justifyItems === 'start' || props.justifyItemsStart,
-    'justify-items-end': props.justifyItems === 'end' || props.justifyItemsEnd,
-    'justify-items-center': props.justifyItems === 'center' || props.justifyItemsCenter,
-    'justify-items-stretch': props.justifyItems === 'stretch' || props.justifyItemsStretch,
-
-    'justify-self-auto': props.justifySelf === 'auto' || props.justifySelfAuto,
-    'justify-self-start': props.justifySelf === 'start' || props.justifySelfStart,
-    'justify-self-end': props.justifySelf === 'end' || props.justifySelfEnd,
-    'justify-self-center': props.justifySelf === 'center' || props.justifySelfCenter,
-    'justify-self-stretch': props.justifySelf === 'stretch' || props.justifySelfStretch,
   }
 })
 </script>

package/components/FlexItem.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
+import { computed } from 'vue'
 
 interface Props {
   is?: string | Object | Function
+  join?: boolean
 
   // https://tailwindcss.com/docs/flex
   flex?: boolean
-
   flex1?: boolean
   flexAuto?: boolean
   flexInitial?: boolean
@@ -24,56 +24,6 @@ interface Props {
   wrap?: boolean
   nowrap?: boolean
   wrapReverse?: boolean
-
-  // https://tailwindcss.com/docs/align-items
-  alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
-  itemsStart?: boolean
-  itemsEnd?: boolean
-  itemsCenter?: boolean
-  itemsBaseline?: boolean
-  itemsStretch?: boolean
-
-  // https://tailwindcss.com/docs/align-content
-  alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
-  contentStart?: boolean
-  contentEnd?: boolean
-  contentCenter?: boolean
-  contentBetween?: boolean
-  contentAround?: boolean
-  contentEvenly?: boolean
-
-  // https://tailwindcss.com/docs/align-self
-  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline'
-  selfAuto?: boolean
-  selfStart?: boolean
-  selfEnd?: boolean
-  selfCenter?: boolean
-  selfStretch?: boolean
-  selfBaseline?: boolean
-
-  // https://tailwindcss.com/docs/justify-content
-  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
-  justifyStart?: boolean
-  justifyEnd?: boolean
-  justifyCenter?: boolean
-  justifyBetween?: boolean
-  justifyAround?: boolean
-  justifyEvenly?: boolean
-
-  // https://tailwindcss.com/docs/justify-items
-  justifyItems?: 'start' | 'end' | 'center' | 'stretch'
-  justifyItemsStart?: boolean
-  justifyItemsEnd?: boolean
-  justifyItemsCenter?: boolean
-  justifyItemsStretch?: boolean
-
-  // https://tailwindcss.com/docs/justify-self
-  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch'
-  justifySelfAuto?: boolean
-  justifySelfStart?: boolean
-  justifySelfEnd?: boolean
-  justifySelfCenter?: boolean
-  justifySelfStretch?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   is: 'div',
@@ -82,6 +32,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const classes = computed(() => {
   return {
+    'join-item': props.join,
+
     'flex-1': props.flex1,
     'flex-auto': props.flexAuto,
     'flex-initial': props.flexInitial,
@@ -97,44 +49,6 @@ const classes = computed(() => {
     'flex-wrap': props.wrap,
     'flex-wrap-reverse': props.wrapReverse,
     'flex-nowrap': props.nowrap,
-
-    'content-start': props.alignContent === 'start' || props.contentStart,
-    'content-end': props.alignContent === 'end' || props.contentEnd,
-    'content-center': props.alignContent === 'center' || props.contentCenter,
-    'content-between': props.alignContent === 'between' || props.contentBetween,
-    'content-around': props.alignContent === 'around' || props.contentAround,
-    'content-evenly': props.alignContent === 'evenly' || props.contentEvenly,
-
-    'items-start': props.alignItems === 'start' || props.itemsStart,
-    'items-end': props.alignItems === 'end' || props.itemsEnd,
-    'items-center': props.alignItems === 'center' || props.itemsCenter,
-    'items-baseline': props.alignItems === 'baseline' || props.itemsBaseline,
-    'items-stretch': props.alignItems === 'stretch' || props.itemsStretch,
-
-    'self-auto': props.alignSelf === 'auto' || props.selfAuto,
-    'self-start': props.alignSelf === 'start' || props.selfStart,
-    'self-end': props.alignSelf === 'end' || props.selfEnd,
-    'self-center': props.alignSelf === 'center' || props.selfCenter,
-    'self-stretch': props.alignSelf === 'stretch' || props.selfStretch,
-    'self-baseline': props.alignSelf === 'baseline' || props.selfBaseline,
-
-    'justify-start': props.justify === 'start' || props.justifyStart,
-    'justify-end': props.justify === 'end' || props.justifyEnd,
-    'justify-center': props.justify === 'center' || props.justifyCenter,
-    'justify-between': props.justify === 'between' || props.justifyBetween,
-    'justify-around': props.justify === 'around' || props.justifyAround,
-    'justify-evenly': props.justify === 'evenly' || props.justifyEvenly,
-
-    'justify-items-start': props.justifyItems === 'start' || props.justifyItemsStart,
-    'justify-items-end': props.justifyItems === 'end' || props.justifyItemsEnd,
-    'justify-items-center': props.justifyItems === 'center' || props.justifyItemsCenter,
-    'justify-items-stretch': props.justifyItems === 'stretch' || props.justifyItemsStretch,
-
-    'justify-self-auto': props.justifySelf === 'auto' || props.justifySelfAuto,
-    'justify-self-start': props.justifySelf === 'start' || props.justifySelfStart,
-    'justify-self-end': props.justifySelf === 'end' || props.justifySelfEnd,
-    'justify-self-center': props.justifySelf === 'center' || props.justifySelfCenter,
-    'justify-self-stretch': props.justifySelf === 'stretch' || props.justifySelfStretch,
   }
 })
 </script>

package/components/Footer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
+import { computed } from 'vue'
 import Text from './Text.vue'
 
 interface Props {

package/components/FooterTitle.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { withDefaults } from 'vue'
 import Text from './Text.vue'
 
 interface Props {
   is?: string
 }
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   is: 'span',
 })
 </script>

package/components/Home/AlternatingFeatureSections.vue

@@ -15,8 +15,8 @@ const favoriteColor = ref('')
       >
         <div class="max-w-xl px-4 mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
           <div>
-            <Flex items-center justify-center class="w-12 h-12 rounded-md bg-gradient-secondary-b">
-              <Icon name="heroicons/heart" class="w-6 h-6 text-secondary-content" aria-hidden="true" />
+            <Flex class="w-12 h-12 rounded-md bg-gradient-secondary-b items-center justify-center">
+              <Icon name="heroicons:heart" class="w-6 h-6 text-secondary-content" aria-hidden="true" />
             </Flex>
 
             <Text block size="3xl" extrabold class="mt-6 tracking-tight">
@@ -26,7 +26,7 @@ const favoriteColor = ref('')
               Tailwind classes can get messy.  DaisyUI Kit helps you declutter your code.  It's clean, scalable Tailwind.
             </Text>
 
-            <NuxtLink to="/install">
+            <NuxtLink to="/docs/install">
               <Button primary class="mt-6 bg-gradient-primary-r">
                 Get started
               </Button>
@@ -72,11 +72,9 @@ const favoriteColor = ref('')
         >
           <div>
             <Flex
-              items-center
-              justify-center
-              class="w-12 h-12 rounded-md bg-gradient-secondary-b text-secondary-content"
+              class="w-12 h-12 rounded-md bg-gradient-secondary-b text-secondary-content items-center justify-center"
             >
-              <Icon name="heroicons/sparkles" class="w-6 h-6" aria-hidden="true" />
+              <Icon name="heroicons:sparkles" class="w-6 h-6" aria-hidden="true" />
             </Flex>
             <Text block size="3xl" extrabold class="mt-6 tracking-tight text-base-content/90">
               Beautiful Components
@@ -91,7 +89,7 @@ const favoriteColor = ref('')
               just the right amount of elegant TypeScript under the hood.
             </Text>
 
-            <NuxtLink to="/daisy-button">
+            <NuxtLink to="/docs/button">
               <Button primary class="mt-6 bg-gradient-primary-r">
                 Get started
               </Button>
@@ -102,7 +100,7 @@ const favoriteColor = ref('')
           <div class="absolute inset-0 pr-4 -ml-48 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
             <img
               class="w-full shadow-xl rounded-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
-              src="/img/unsplash-forest-sm.jpeg"
+              src="/img/unsplash-forest-sm.jpg"
               alt="Customer profile user interface"
             >
           </div>
@@ -160,7 +158,7 @@ const favoriteColor = ref('')
                     <LabelText>What is your name?</LabelText>
                     <LabelTextAlt>
                       <Tooltip primary left tip="Just answer correctly!">
-                        <Button tabindex="-1" xs ghost><Icon name="feather/info" /></Button>
+                        <Button tabindex="-1" xs ghost><Icon name="feather:info" /></Button>
                       </Tooltip>
                     </LabelTextAlt>
                   </Label>
@@ -177,7 +175,7 @@ const favoriteColor = ref('')
                     <LabelText>What is your quest?</LabelText>
                     <LabelTextAlt>
                       <Tooltip secondary left tip="Where do you want to go, today?">
-                        <Button tabindex="-1" xs ghost><Icon name="feather/info" /></Button>
+                        <Button tabindex="-1" xs ghost><Icon name="feather:info" /></Button>
                       </Tooltip>
                     </LabelTextAlt>
                   </Label>
@@ -194,7 +192,7 @@ const favoriteColor = ref('')
                     <LabelText>What is your favorite color?</LabelText>
                     <LabelTextAlt>
                       <Tooltip accent left tip="Blue or Yellow?">
-                        <Button tabindex="-1" xs ghost><Icon name="feather/info" /></Button>
+                        <Button tabindex="-1" xs ghost><Icon name="feather:info" /></Button>
                       </Tooltip>
                     </LabelTextAlt>
                   </Label>

package/components/Home/BitoviConsulting.vue

@@ -6,7 +6,7 @@
         <div class="h-full xl:relative xl:col-start-2">
           <img
             class="object-cover w-full h-full opacity-25 xl:absolute xl:inset-0"
-            src="/img/unsplash-dev-group-sm.jpeg"
+            src="/img/unsplash-dev-group-sm.jpg"
             alt="People working on laptops"
           >
           <div

package/components/Home/BitoviOpenSource.vue

@@ -2,7 +2,7 @@
   <!-- Logo Cloud -->
   <div class="bg-base-200">
     <div class="px-4 py-16 mx-auto max-w-7xl sm:px-6 lg:px-8">
-      <Flex items-center justify-center class="flex-col gap-4 sm:flex-row">
+      <Flex class="flex-col gap-4 sm:flex-row items-center justify-center">
         <Text is="h3" uppercase semibold center lg class="tracking-wide text-base-content/80">
           Another Open-Source Gift by
         </Text>
@@ -11,14 +11,14 @@
         </NuxtLink>
       </Flex>
 
-      <Flex items-center justify-center class="mt-4 mb-4" />
+      <Flex class="mt-4 mb-4 items-center justify-center" />
 
       <Text is="p" center lg semibold>
         DaisyUI Kit joins the ranks of other professional-quality open-source projects.
       </Text>
 
       <div class="grid grid-cols-1 lg:grid-cols-3">
-        <Flex items-center justify-center class="py-6 lg:py-10 bg-gradient-radial from-white/20 via-transparent to-transparent">
+        <Flex class="py-6 lg:py-10 bg-gradient-radial from-white/20 via-transparent to-transparent items-center justify-center">
           <NuxtLink target="blank" to="https://www.canjs.com">
             <img
               class="h-10 lg:h-16"
@@ -27,7 +27,7 @@
             >
           </NuxtLink>
         </Flex>
-        <Flex items-center justify-center class="py-6 lg:py-10 bg-gradient-radial from-white/20 via-transparent to-transparent">
+        <Flex class="py-6 lg:py-10 bg-gradient-radial from-white/20 via-transparent to-transparent items-center justify-center">
           <NuxtLink target="blank" to="https://www.donejs.com">
             <img
               class="h-10 lg:h-16"
@@ -36,7 +36,7 @@
             >
           </NuxtLink>
         </Flex>
-        <Flex items-center justify-center class="py-6 lg:py-10 bg-gradient-radial from-white/20 via-transparent to-transparent">
+        <Flex class="py-6 lg:py-10 bg-gradient-radial from-white/20 via-transparent to-transparent items-center justify-center">
           <NuxtLink target="blank" to="https://www.stealjs.com">
             <img
               class="h-10 lg:h-16"

package/components/Home/Footer.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const footerNavigation = {
   solutions: [
-    { name: 'Install', to: 'install' },
-    { name: 'Components', to: 'daisy-button' },
+    { name: 'Install', to: '/docs/install' },
+    { name: 'Components', to: '/docs/button' },
   ],
   support: [
     { name: 'Consulting', to: 'https://www.bitovi.com', target: 'blank' },
@@ -82,9 +82,10 @@ const social = [
               <Label for="email-address" class="sr-only">
                 <LabelText>Email address</LabelText>
               </Label>
-              <InputGroup>
+              <Join>
                 <TextInput
                   id="email-address"
+                  join
                   name="email-address"
                   bordered primary
                   type="email"
@@ -93,16 +94,16 @@ const social = [
                   placeholder="Enter your email"
                   class="w-full placeholder-base-content/80"
                 />
-                <Button class="bg-gradient-primary-r hover:bg-primary-focus zoom-105 text-primary-content">
+                <Button join class="bg-gradient-primary-r hover:bg-primary-focus zoom-105 text-primary-content">
                   Subscribe
                 </Button>
-              </InputGroup>
+              </Join>
             </FormControl>
           </form>
         </div>
       </div>
 
-      <Flex items-center justify-between class="pt-8 mt-12 border-t border-base-content lg:mt-16">
+      <Flex class="pt-8 mt-12 border-t border-base-content lg:mt-16 items-center justify-between">
         <NuxtLink target="blank" to="https://www.bitovi.com">
           <Link is="span" hover>
             Built with ❤️ by Bitovi

package/components/Home/GradientFeatureSections.vue

@@ -4,19 +4,19 @@ const features = [
     name: 'Beyond the Dark Side',
     description:
       'Don\'t clutter your app with "dark:" prefixes. Build Smart with CSS variables.',
-    icon: 'heroicons-outline/moon',
+    icon: 'heroicons-outline:moon',
   },
   {
     name: 'Theme Builder',
     description:
       'Fine tune the perfect color palette for your app.',
-    icon: 'heroicons-outline/adjustments',
+    icon: 'heroicons-outline:adjustments',
   },
   {
     name: 'Beautiful Inputs',
     description:
       'Create beautiful forms with TextInput, TextArea, Checkbox, Toggle, Radio, Range, Select and more!',
-    icon: 'heroicons-outline/pencil-alt',
+    icon: 'heroicons-outline:pencil-alt',
   },
   {
     name: 'Keep Tabs on Delightful',
@@ -27,26 +27,26 @@ const features = [
   {
     name: 'Lay It All Out',
     description:
-      'Use the ButtonGroup, InputGroup, Drawer, Flex, Footer, Stack and more to create the perfect layout.',
-    icon: 'heroicons-outline/template',
+      'Use the Drawer, Flex, Footer, Stack, Join, and more to create the perfect layout.',
+    icon: 'heroicons-outline:template',
   },
   {
     name: 'Think Outside the Box',
     description:
       'Build with all kinds of shapes using Mask. Your site can be more than a grid of rectangles.',
-    icon: 'heroicons-outline/star',
+    icon: 'heroicons-outline:star',
   },
   {
     name: 'Interactive Makes Interesting',
     description:
       'Create Dropdowns, Modals, Tooltips, and Tabs, all without writing a single line of JavaScript.',
-    icon: 'heroicons-outline/collection',
+    icon: 'heroicons-outline:collection',
   },
   {
     name: 'What\s on the Menu',
     description:
       'DaisyUI comes with gorgeous menu styles. They cleanly integrate with router links.',
-    icon: 'heroicons-outline/heart',
+    icon: 'heroicons-outline:heart',
   },
 ]
 </script>
@@ -69,7 +69,7 @@ const features = [
         class="grid grid-cols-1 mt-12 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-4 lg:gap-x-8 lg:gap-y-16"
       >
         <div v-for="feature in features" :key="feature.name">
-          <Flex items-center justify-center class="w-12 h-12 rounded-md bg-base-100/20">
+          <Flex class="w-12 h-12 rounded-md bg-base-100/20 items-center justify-center">
             <Icon :name="feature.icon" class="w-6 h-6" aria-hidden="true" />
           </Flex>
           <div class="mt-6">

package/components/Home/Header.vue

@@ -1,11 +1,4 @@
 <script setup lang="ts">
-import {
-  Popover,
-  PopoverButton,
-  PopoverGroup,
-  PopoverPanel,
-} from '@headlessui/vue'
-
 const user = useState('user')
 
 const links = [
@@ -14,25 +7,25 @@ const links = [
     description:
       'Get a better understanding of where your traffic is coming from.',
     href: '#',
-    icon: 'heroicons-outline/inbox',
+    icon: 'heroicons-outline:inbox',
   },
   {
     name: 'Messaging',
     description: 'Speak directly to your customers in a more meaningful way.',
     href: '#',
-    icon: 'heroicons-outline/annotation',
+    icon: 'heroicons-outline:annotation',
   },
   {
     name: 'Live Chat',
     description: 'Your customers\' data will be safe and secure.',
     href: '#',
-    icon: 'heroicons-outline/chat-alt-2',
+    icon: 'heroicons-outline:chat-alt-2',
   },
   {
     name: 'Knowledge Base',
     description: 'Connect with third-party tools that you\'re already using.',
     href: '#',
-    icon: 'heroicons-outline/question-mark-circle',
+    icon: 'heroicons-outline:question-mark-circle',
   },
 ]
 </script>
@@ -40,8 +33,7 @@ const links = [
 <template>
   <header class="bg-base-100/95">
     <Flex
-      items-center justify-between
-      class="px-4 py-6 pb-2 mx-auto max-w-7xl sm:px-6 md:justify-start md:space-x-10 lg:px-8"
+      class="px-4 py-6 pb-2 mx-auto max-w-7xl sm:px-6 md:justify-start md:space-x-10 lg:px-8 items-center justify-between"
     >
       <Flex grow>
         <NuxtLink to="/">
@@ -49,16 +41,18 @@ const links = [
         </NuxtLink>
       </Flex>
 
-      <Flex is="nav" items-center row class="hidden gap-10 md:flex">
+      <Flex is="nav" row class="hidden gap-10 md:flex items-center">
         <!-- <a href="#" class="text-base font-medium text-base-content ">
             Themes
           </a> -->
 
-        <NuxtLink to="install" class="text-base font-medium text-base-content ">
+        <Search />
+
+        <NuxtLink to="/docs/install" class="text-base font-medium text-base-content ">
           Install
         </NuxtLink>
 
-        <NuxtLink to="daisy-button" class="text-base font-medium text-base-content ">
+        <NuxtLink to="/docs/button" class="text-base font-medium text-base-content ">
           Components
         </NuxtLink>