daisy-ui-kit 2.1.1 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daisy-ui-kit",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "",
   "scripts": {
     "build": "nuxi build",
@@ -15,7 +15,8 @@
   },
   "main": "index.ts",
   "files": [
-    "components/*",
+    "components/*.vue",
+    "components/Mask.config.ts",
     "nuxt.js"
   ],
   "peerDependencies": {

package/components/Home/AlternatingFeatureSections.vue

@@ -1,219 +0,0 @@
-<script setup lang="ts">
-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 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">
-              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="/docs/install">
-              <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>
-  <span class="text-gray-400">&lt;!-- 👍 Write this --&gt;</span>
-  &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;!-- 👎 Avoid this --&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
-              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" />
-            </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
-              <NuxtLink target="blank" to="https://www.daisyui.com">
-                <Link is="span">
-                  DaisyUI
-                </Link>
-              </NuxtLink>. Our components are built with
-              just the right amount of elegant TypeScript under the hood.
-            </Text>
-
-            <NuxtLink to="/docs/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="/img/unsplash-forest-sm.jpg"
-              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><Icon name="feather:info" /></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><Icon name="feather:info" /></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><Icon name="feather:info" /></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/BitoviConsulting.vue

@@ -1,53 +0,0 @@
-<template>
-  <!-- Stats section -->
-  <div class="relative bg-gray-900">
-    <div class="absolute inset-x-0 bottom-0 h-80 xl:top-0 xl:h-full">
-      <div class="w-full h-full xl:grid xl:grid-cols-2">
-        <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.jpg"
-            alt="People working on laptops"
-          >
-          <div
-            aria-hidden="true"
-            class="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-gray-900 xl:inset-y-0 xl:left-0 xl:h-full xl:w-32 xl:bg-gradient-to-r"
-          />
-        </div>
-      </div>
-    </div>
-
-    <div
-      class="max-w-4xl px-4 mx-auto sm:px-6 lg:max-w-7xl lg:px-8 xl:grid xl:grid-cols-2 xl:grid-flow-col-dense xl:gap-x-8"
-    >
-      <div class="relative pt-12 pb-64 text-white sm:pt-24 sm:pb-64 xl:col-start-1 xl:pb-24">
-        <Text sm semibold uppercase block class="tracking-wide">
-          <span class="text-transparent bg-gradient-to-r from-purple-300 to-indigo-300 bg-clip-text">Bitovi Consulting</span>
-        </Text>
-        <Text
-          primary
-          block extrabold size="3xl"
-          class="mt-3"
-        >
-          Let the experts build it for you
-        </Text>
-
-        <Text is="p" lg class="mt-5 text-gray-300">
-          Bitovi has over 15 years of experience helping every type of business.
-          From the smallest startups to the largest Fortune 100 companies, we can
-          either be your team or get your team trained quickly to build scalable,
-          beautiful applications.  Take a look at our track record and get in touch
-          when you're ready.
-        </Text>
-
-        <Flex class="mt-6 space-x-4">
-          <NuxtLink to="https://www.bitovi.com" target="blank">
-            <Button secondary lg>
-              Visit Bitovi.com
-            </Button>
-          </NuxtLink>
-        </Flex>
-      </div>
-    </div>
-  </div>
-</template>

package/components/Home/BitoviOpenSource.vue

@@ -1,51 +0,0 @@
-<template>
-  <!-- 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 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>
-        <NuxtLink target="blank" to="https://www.bitovi.com" class="-mt-4">
-          <img src="/logos/bitovi-red.png" class="h-[40px]">
-        </NuxtLink>
-      </Flex>
-
-      <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 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"
-              src="/logos/canjs.svg"
-              alt="CanJS is a Bitovi professional open-source project."
-            >
-          </NuxtLink>
-        </Flex>
-        <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"
-              src="/logos/donejs.png"
-              alt="DoneJS is a Bitovi professional open-source project."
-            >
-          </NuxtLink>
-        </Flex>
-        <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"
-              src="/logos/stealjs.svg"
-              alt="StealJS is a Bitovi professional open-source project."
-            >
-          </NuxtLink>
-        </Flex>
-      </div>
-    </div>
-  </div>
-</template>

package/components/Home/Footer.vue

@@ -1,127 +0,0 @@
-<script setup lang="ts">
-const footerNavigation = {
-  solutions: [
-    { name: 'Install', to: '/docs/install' },
-    { name: 'Components', to: '/docs/button' },
-  ],
-  support: [
-    { name: 'Consulting', to: 'https://www.bitovi.com', target: 'blank' },
-    { name: 'Documentation', to: '#' },
-    { name: 'Github Issues', to: '#' },
-  ],
-  // company: [
-  //   { name: 'About', to: '#' },
-  //   { name: 'Blog', to: '#' },
-  //   { name: 'Jobs', to: '#' },
-  //   { name: 'Press', to: '#' },
-  //   { name: 'Partners', to: '#' },
-  // ],
-  // legal: [
-  //   { name: 'Claim', to: '#' },
-  //   { name: 'Privacy', to: '#' },
-  //   { name: 'Terms', to: '#' },
-  // ],
-}
-
-const social = [
-  // { name: 'Facebook', to: '#', icon: IconFacebook },
-  // { name: 'Instagram', to: '#', icon: IconInstagram },
-  { name: 'Twitter', to: '#', icon: 'fe/twitter' },
-  { name: 'GitHub', to: '#', icon: 'fe/github' },
-  // { name: 'Dribbble', to: '#', icon: IconDribbble },
-]
-</script>
-
-<template>
-  <footer class="bg-base-100" aria-labelledby="footer-heading">
-    <h2 id="footer-heading" class="sr-only">
-      Footer
-    </h2>
-    <div class="px-4 pt-16 pb-8 mx-auto max-w-7xl sm:px-6 lg:pt-24 lg:px-8">
-      <div class="xl:grid xl:grid-cols-3 xl:gap-8">
-        <div class="grid grid-cols-2 gap-8 xl:col-span-2">
-          <div class="md:grid md:grid-cols-2 md:gap-8">
-            <div>
-              <Text is="h3" semibold sm class="tracking-wider uppercase text-base-content/40">
-                Solutions
-              </Text>
-              <ul role="list" class="mt-4 space-y-4">
-                <li v-for="item in footerNavigation.solutions" :key="item.name">
-                  <NuxtLink :href="item.to" class="text-base-content">
-                    {{ item.name }}
-                  </NuxtLink>
-                </li>
-              </ul>
-            </div>
-
-            <div class="mt-12 md:mt-0">
-              <Text is="h3" semibold sm class="tracking-wider uppercase text-base-content/40">
-                Support
-              </Text>
-              <ul role="list" class="mt-4 space-y-4">
-                <li v-for="item in footerNavigation.support" :key="item.name">
-                  <NuxtLink :href="item.to" class="text-base-content" :target="item.target">
-                    {{ item.name }}
-                  </NuxtLink>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        <div class="mt-12 xl:mt-0">
-          <Text is="h3" sm semibold class="tracking-wider uppercase text-base-content/50">
-            Subscribe to updates
-          </Text>
-          <Text is="p" class="mt-4 text-base-content/80">
-            The latest news, articles, and resources, sent to your inbox weekly.
-          </Text>
-
-          <form class="mt-4">
-            <FormControl>
-              <Label for="email-address" class="sr-only">
-                <LabelText>Email address</LabelText>
-              </Label>
-              <Join>
-                <TextInput
-                  id="email-address"
-                  join
-                  name="email-address"
-                  bordered primary
-                  type="email"
-                  autocomplete="email"
-                  required
-                  placeholder="Enter your email"
-                  class="w-full placeholder-base-content/80"
-                />
-                <Button join class="bg-gradient-primary-r hover:bg-primary-focus zoom-105 text-primary-content">
-                  Subscribe
-                </Button>
-              </Join>
-            </FormControl>
-          </form>
-        </div>
-      </div>
-
-      <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
-          </Link>
-        </NuxtLink>
-
-        <Flex class="gap-6">
-          <NuxtLink
-            v-for="item in social"
-            :key="item.name"
-            :to="item.to"
-            class="text-gray-400 hover:text-gray-500"
-          >
-            <span class="sr-only">{{ item.name }}</span>
-            <Icon :name="item.icon" class="w-6 h-6" aria-hidden="true" />
-          </NuxtLink>
-        </Flex>
-      </Flex>
-    </div>
-  </footer>
-</template>

package/components/Home/GradientFeatureSections.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-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',
-  },
-  {
-    name: 'Theme Builder',
-    description:
-      'Fine tune the perfect color palette for your app.',
-    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',
-  },
-  {
-    name: 'Keep Tabs on Delightful',
-    description:
-      'The TabsManager component lets you stay in control and create the perfect, custom tabs layout.',
-    icon: 'ph/tabs-bold',
-  },
-  {
-    name: 'Lay It All Out',
-    description:
-      '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',
-  },
-  {
-    name: 'Interactive Makes Interesting',
-    description:
-      'Create Dropdowns, Modals, Tooltips, and Tabs, all without writing a single line of JavaScript.',
-    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',
-  },
-]
-</script>
-
-<template>
-  <!-- Gradient Feature Section -->
-  <div class="duration-300 transition-color bg-gradient-primary-r text-primary-content">
-    <div
-      class="max-w-4xl px-4 py-16 mx-auto sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:pt-24 lg:px-8"
-    >
-      <Text block size="3xl" extrabold class="tracking-tight">
-        Another Open-Source Gift from Bitovi to You
-      </Text>
-      <Text block lg class="max-w-3xl mt-4 text-opacity-50">
-        Everything in DaisyUI Kit is yours for free.  Consider each component to be our gift to you!
-        <br>Here are a few of the highlights.
-      </Text>
-
-      <div
-        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 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">
-            <Text is="h3" block lg medium>
-              {{ feature.name }}
-            </Text>
-            <Text is="p" block base class="mt-2 text-opacity-50">
-              {{ feature.description }}
-            </Text>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/components/Home/Header.vue

@@ -1,95 +0,0 @@
-<script setup lang="ts">
-const user = useState('user')
-
-const links = [
-  {
-    name: 'Inbox',
-    description:
-      'Get a better understanding of where your traffic is coming from.',
-    href: '#',
-    icon: 'heroicons-outline:inbox',
-  },
-  {
-    name: 'Messaging',
-    description: 'Speak directly to your customers in a more meaningful way.',
-    href: '#',
-    icon: 'heroicons-outline:annotation',
-  },
-  {
-    name: 'Live Chat',
-    description: 'Your customers\' data will be safe and secure.',
-    href: '#',
-    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',
-  },
-]
-</script>
-
-<template>
-  <header class="bg-base-100/95">
-    <Flex
-      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="/">
-          <Logo class="ml-4 text-4xl" />
-        </NuxtLink>
-      </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> -->
-
-        <Search />
-
-        <NuxtLink to="/docs/install" class="text-base font-medium text-base-content ">
-          Install
-        </NuxtLink>
-
-        <NuxtLink to="/docs/button" class="text-base font-medium text-base-content ">
-          Components
-        </NuxtLink>
-
-        <!-- <a href="#" class="text-base font-medium text-base-content ">
-            Contribute
-          </a> -->
-      </Flex>
-
-      <ThemePicker />
-
-      <!-- <Flex items-center justify-end class="hidden md:flex md:flex-1 lg:w-0">
-        <template v-if="user">
-          <NuxtLink to="/app/dashboard">
-            <Button class="normal-case bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border hover:from-purple-700 hover:to-indigo-700">
-              Open Dashboard
-            </Button>
-          </NuxtLink>
-        </template>
-
-        <template v-else>
-          <a href="/api/auth/login">
-            <Button
-              ghost
-              class="text-base font-medium text-gray-500 normal-case hover:text-gray-900"
-            >
-              Sign in
-            </Button>
-          </a>
-          <a href="/api/auth/login" class="ml-4">
-            <Button
-              class="text-base normal-case border-none shadow-md bg-gradient-primary-r hover:bg-primary-focus zoom-105 text-primary-content"
-            >
-              Sign up
-            </Button>
-          </a>
-        </template>
-      </Flex> -->
-    </Flex>
-  </header>
-</template>