daisy-ui-kit 0.4.4

package/components/FlexItem.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from 'vue'
+
+interface Props {
+  is?: string | Object | Function
+
+  // https://tailwindcss.com/docs/flex
+  flex?: boolean
+
+  flex1?: boolean
+  flexAuto?: boolean
+  flexInitial?: boolean
+  none?: boolean
+
+  grow?: boolean
+
+  // https://tailwindcss.com/docs/flex-direction
+  direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse'
+  row?: boolean
+  col?: boolean
+  reverse?: boolean
+
+  // https://tailwindcss.com/docs/flex-wrap
+  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',
+  flex: false,
+})
+
+const classes = computed(() => {
+  return {
+    'flex-1': props.flex1,
+    'flex-auto': props.flexAuto,
+    'flex-initial': props.flexInitial,
+    'flex-none': props.none,
+
+    'flex-grow': props.grow,
+
+    'flex-row': props.direction === 'row' || props.row,
+    'flex-col': props.direction === 'col' || props.col,
+    'flex-row-reverse': props.direction === 'row-reverse' || (props.row && props.reverse),
+    'flex-col-reverse': props.direction === 'col-reverse' || (props.col && props.reverse),
+
+    '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>
+
+<template>
+  <component :is="is" class="flex" :class="classes">
+    <slot />
+  </component>
+</template>

package/components/Footer.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from 'vue'
+import Text from './Text.vue'
+
+interface Props {
+  center?: boolean
+  is?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  center: false,
+  is: 'footer',
+})
+
+const classes = computed(() => {
+  return {
+    'divider-center': props.center,
+  }
+})
+</script>
+
+<template>
+  <Text :is="is" class="footer" :class="classes">
+    <slot />
+  </Text>
+</template>

package/components/FooterTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+import Text from './Text.vue'
+
+interface Props {
+  is?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'span',
+})
+</script>
+
+<template>
+  <Text :is="is" class="footer-title">
+    <slot />
+  </Text>
+</template>

package/components/FormControl.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="form-control">
+    <slot />
+  </div>
+</template>

package/components/Hero.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+import Text from './Text.vue'
+
+interface Props {
+  is?: string
+}
+withDefaults(defineProps<Props>(), {
+  is: 'div',
+})
+</script>
+
+<template>
+  <Text :is="is" class="hero">
+    <slot />
+  </Text>
+</template>

package/components/HeroContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+import Text from './Text.vue'
+
+interface Props {
+  is?: string
+}
+withDefaults(defineProps<Props>(), {
+  is: 'div',
+})
+</script>
+
+<template>
+  <Text :is="is" class="hero-content">
+    <slot />
+  </Text>
+</template>

package/components/HeroOverlay.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="hero-overlay">
+    <slot />
+  </div>
+</template>

package/components/Home/AlternatingFeatureSections.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { HeartIcon, SparklesIcon } from '@heroicons/vue/outline'
+import IconInfo from '~icons/feather/info'
+
+const isChecked = ref(true)
+const name = ref('')
+const quest = ref('')
+const favoriteColor = ref('')
+</script>
+
+<template>
+  <!-- Alternating Feature Sections -->
+  <div class="relative pt-16 pb-32 overflow-hidden">
+    <div aria-hidden="true" class="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-secondary/30" />
+    <div class="relative">
+      <div
+        class="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24"
+      >
+        <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">
+              <HeartIcon class="w-6 h-6 text-secondary-content" aria-hidden="true" />
+            </Flex>
+
+            <Text block size="3xl" extrabold class="mt-6 tracking-tight">
+              Clean Components
+            </Text>
+            <Text block lg class="mt-4 text-opacity-80">
+              Tailwind classes can get messy.  DaisyUI Kit helps you declutter your code.  It's clean, scalable Tailwind.
+            </Text>
+
+            <NuxtLink to="/daisy-button">
+              <Button primary class="mt-6 bg-gradient-primary-r">
+                Get started
+              </Button>
+            </NuxtLink>
+          </div>
+
+          <div class="pt-6 mt-8 border-t border-gray-200">
+            <HomeTestimonial />
+          </div>
+        </div>
+        <div class="mt-12 sm:mt-16 lg:mt-0">
+          <div class="py-16 pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
+            <Flex grow class="w-[800px] mx-auto shadow-lg mockup-code">
+              <pre><code>
+  &lt;<span class="text-orange-400">Button</span> <span class="text-purple-400">primary</span>&gt;Get Started&lt;/<span class="text-orange-400">Button</span>&gt;</code>
+
+  <span class="text-gray-400">&lt;!-- instead of --&gt;</span>
+
+  &lt;<span class="text-green-400">button</span> <span class="text-purple-400">class</span>="<span class="text-amber-400">inline-block px-4 py-3</span>
+    <span class="text-amber-400">text-sm font-semibold text-center</span>
+    <span class="text-amber-400">text-white uppercase transition</span>
+    <span class="text-amber-400">duration-200 ease-in-out bg-indigo-600 </span>
+    <span class="text-amber-400">rounded-md cursor-pointer</span>
+    <span class="text-amber-400">hover:bg-indigo-700</span>
+  &gt;
+    Get Started
+  &lt;<span class="text-green-400">button</span>&gt;
+
+</pre>
+            </Flex>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mt-24">
+      <div
+        class="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24"
+      >
+        <div
+          class="max-w-xl px-4 mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2"
+        >
+          <div>
+            <Flex
+              items-center
+              justify-center
+              class="w-12 h-12 rounded-md bg-gradient-secondary-b text-secondary-content"
+            >
+              <SparklesIcon 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
+            </Text>
+            <Text block lg class="mt-4 text-base-content/60">
+              DaisyUI Kit's components are powered by the beautiful CSS of <Link>DaisyUI</Link>. Our components are built with
+              just the right amount of elegant TypeScript under the hood.
+            </Text>
+
+            <NuxtLink to="/daisy-button">
+              <Button primary class="mt-6 bg-gradient-primary-r">
+                Get started
+              </Button>
+            </NuxtLink>
+          </div>
+        </div>
+        <div class="relative mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
+          <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="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80"
+              alt="Customer profile user interface"
+            >
+          </div>
+          <div class="absolute inset-4">
+            <Flex class="space-x-4">
+              <Flex col>
+                <Card glass class="w-48 p-6 shadow-xl">
+                  <Label class="cursor-pointer">
+                    <LabelText class="text-neutral">Neutral</LabelText>
+                    <Toggle v-model="isChecked" />
+                  </Label>
+
+                  <Label class="cursor-pointer">
+                    <LabelText class="text-neutral">Primary</LabelText>
+                    <Toggle v-model="isChecked" primary />
+                  </Label>
+
+                  <Label class="cursor-pointer">
+                    <LabelText class="text-neutral">Secondary</LabelText>
+                    <Toggle v-model="isChecked" secondary />
+                  </Label>
+
+                  <Label class="cursor-pointer">
+                    <LabelText class="text-neutral">Accent</LabelText>
+                    <Toggle v-model="isChecked" accent />
+                  </Label>
+                </Card>
+
+                <Card glass class="w-48 p-6 mt-4 text-white shadow-xl">
+                  <Label class="cursor-pointer">
+                    <LabelText class="text-neutral">Neutral</LabelText>
+                    <Toggle v-model="isChecked" />
+                  </Label>
+
+                  <Label class="cursor-pointer">
+                    <LabelText class="text-neutral">Primary</LabelText>
+                    <Toggle v-model="isChecked" primary />
+                  </Label>
+
+                  <Label class="cursor-pointer">
+                    <LabelText class="text-neutral">Secondary</LabelText>
+                    <Toggle v-model="isChecked" secondary />
+                  </Label>
+
+                  <Label class="cursor-pointer">
+                    <LabelText class="text-neutral">Accent</LabelText>
+                    <Toggle v-model="isChecked" accent />
+                  </Label>
+                </Card>
+              </Flex>
+
+              <Card class="p-6 space-y-6 shadow-xl text-base-content bg-base-100 w-80">
+                <FormControl class="w-full max-w-xs">
+                  <Label>
+                    <LabelText>What is your name?</LabelText>
+                    <LabelTextAlt>
+                      <Tooltip primary left tip="Just answer correctly!">
+                        <Button tabindex="-1" xs ghost><IconInfo /></Button>
+                      </Tooltip>
+                    </LabelTextAlt>
+                  </Label>
+                  <TextInput
+                    v-model="name"
+                    bordered
+                    placeholder="Sir Gallahad"
+                    class="w-full max-w-xs"
+                  />
+                </FormControl>
+
+                <FormControl class="w-full max-w-xs">
+                  <Label>
+                    <LabelText>What is your quest?</LabelText>
+                    <LabelTextAlt>
+                      <Tooltip secondary left tip="Where do you want to go, today?">
+                        <Button tabindex="-1" xs ghost><IconInfo /></Button>
+                      </Tooltip>
+                    </LabelTextAlt>
+                  </Label>
+                  <TextInput
+                    v-model="quest"
+                    bordered
+                    placeholder="I seek the Grail"
+                    class="w-full max-w-xs"
+                  />
+                </FormControl>
+
+                <FormControl class="w-full max-w-xs">
+                  <Label>
+                    <LabelText>What is your favorite color?</LabelText>
+                    <LabelTextAlt>
+                      <Tooltip accent left tip="Blue or Yellow?">
+                        <Button tabindex="-1" xs ghost><IconInfo /></Button>
+                      </Tooltip>
+                    </LabelTextAlt>
+                  </Label>
+                  <TextInput
+                    v-model="favoriteColor"
+                    bordered
+                    placeholder="Blue, no yellow?"
+                    class="w-full max-w-xs"
+                  />
+                  <Label>
+                    <LabelTextAlt><Text error>Don't get this wrong</Text></LabelTextAlt>
+                    <LabelTextAlt><Text info>or else</Text></LabelTextAlt>
+                  </Label>
+                </FormControl>
+
+                <Button>Submit</Button>
+              </Card>
+            </Flex>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/Home/CTA.vue

@@ -0,0 +1,27 @@
+<template>
+  <!-- CTA Section -->
+  <div class="bg-neutral">
+    <div
+      class="max-w-4xl px-4 py-16 mx-auto sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 lg:flex lg:items-center lg:justify-between"
+    >
+      <Text is="h2" size="4xl" extrabold class="tracking-tight">
+        <Text block class="text-neutral-content">
+          Build faster with <Text secondary>
+            DaisyUI Kit Premium
+          </Text>
+        </Text>
+        <Text block size="3xl" class="text-transparent bg-gradient-secondary-r bg-clip-text">
+          Templates for App Layout, Marketing and E-Commerce
+        </Text>
+      </Text>
+
+      <div class="mt-6 space-y-4 sm:space-y-0 sm:flex sm:space-x-4">
+        <Tooltip tip="Coming Soon">
+          <Button primary lg>
+            Learn more
+          </Button>
+        </Tooltip>
+      </div>
+    </div>
+  </div>
+</template>