ui-thing 0.1.53 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "description": "CLI used to add Nuxt 3 components to a project",
   "keywords": [
     "cli",

package/src/comps.ts

@@ -868,6 +868,33 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "Description List",
+    value: "description-list",
+    files: [
+      {
+        fileName: "DescriptionList/DescriptionList.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <Primitive\n    v-bind="reactiveOmit(props, \'class\')"\n    :class="descriptionListDetailsStyles({ class: props.class })"\n  >\n    <slot />\n  </Primitive>\n</template>\n<script lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  export type DescriptionDetailsProps = PrimitiveProps & {\n    class?: any;\n  };\n\n  export const descriptionListDetailsStyles = tv({\n    base: "grid grid-cols-1 text-base/6 sm:grid-cols-2 sm:text-sm/6",\n  });\n</script>\n\n<script lang="ts" setup>\n  const props = withDefaults(defineProps<DescriptionDetailsProps>(), {\n    as: "dl",\n  });\n</script>\n',
+      },
+      {
+        fileName: "DescriptionList/Details.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <Primitive\n    v-bind="reactiveOmit(props, \'class\', \'text\')"\n    :class="descriptionListDetailsStyles({ class: props.class })"\n  >\n    <slot>{{ text }}</slot>\n  </Primitive>\n</template>\n<script lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  export type DescriptionDetailsProps = PrimitiveProps & {\n    text?: string;\n    class?: any;\n  };\n\n  export const descriptionListDetailsStyles = tv({\n    base: "pb-3 pt-1 text-foreground sm:border-t sm:py-3 sm:[&:nth-child(2)]:border-none",\n  });\n</script>\n\n<script lang="ts" setup>\n  const props = withDefaults(defineProps<DescriptionDetailsProps>(), {\n    as: "dd",\n  });\n</script>\n',
+      },
+      {
+        fileName: "DescriptionList/Term.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <Primitive\n    v-bind="reactiveOmit(props, \'class\', \'text\')"\n    :class="descriptionListDetailsStyles({ class: props.class })"\n  >\n    <slot>{{ text }}</slot>\n  </Primitive>\n</template>\n<script lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { Primitive } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  export type DescriptionDetailsProps = PrimitiveProps & {\n    text?: string;\n    class?: any;\n  };\n\n  export const descriptionListDetailsStyles = tv({\n    base: "border-t pt-3 text-muted-foreground first:border-none sm:py-3",\n  });\n</script>\n\n<script lang="ts" setup>\n  const props = withDefaults(defineProps<DescriptionDetailsProps>(), {\n    as: "dt",\n  });\n</script>\n',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Dialog",
     value: "dialog",
@@ -1470,6 +1497,9 @@ export default [
           '<template>\n  <TransitionFade :duration="500" appear tag="template">\n    <Teleport v-if="fullPage && open" to="#teleports">\n      <div :class="loaderStyles().backdrop({ class: backdropClass, fullPage })">\n        <Icon :class="loaderStyles().icon({ class: props.class })" :name="props.icon" />\n        <slot :open>{{ text }}</slot>\n      </div>\n    </Teleport>\n    <div\n      v-if="!fullPage && open"\n      :class="loaderStyles().backdrop({ class: props.backdropClass, fullPage })"\n    >\n      <Icon :class="loaderStyles().icon({ class: props.class })" :name="props.icon" />\n      <slot :open>{{ text }}</slot>\n    </div>\n  </TransitionFade>\n</template>\n\n<script lang="ts">\n  import { useMagicKeys } from "@vueuse/core";\n  import { useBodyScrollLock } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  export type LoaderProps = PrimitiveProps & {\n    /**\n     * The icon to display in the loader.\n     *\n     * @default "svg-spinners:bars-rotate-fade"\n     */\n    icon?: string;\n    /**\n     * The class to apply to the loader Icon\n     */\n    class?: any;\n    /**\n     * The class to apply to the backdrop\n     */\n    backdropClass?: any;\n    /**\n     * Whether the loader should take up the full page.\n     *\n     * When this is `true`, the loader will be displayed in a fixed position that covers the entire page. You can press the `esc` key to close the loader.\n     */\n    fullPage?: boolean;\n    /**\n     * Whether to lock the scroll when the loader is open.\n     *\n     * @default true\n     */\n    lockScroll?: boolean;\n    /**\n     * The role of the component.\n     *\n     * @default "progressbar"\n     */\n    role?: string;\n    /**\n     * The text to display in the loader.\n     *\n     * This is displayed below the loader icon.\n     */\n    text?: string;\n    /**\n     * Whether to close the loader when the `esc` key is pressed.\n     *\n     * @default true\n     */\n    closeOnEscape?: boolean;\n  };\n\n  export const loaderStyles = tv({\n    slots: {\n      icon: "size-5",\n      backdrop: "flex flex-col items-center justify-center gap-3",\n    },\n    variants: {\n      fullPage: {\n        true: {\n          backdrop:\n            "pointer-events-auto fixed inset-0 z-[999] size-full bg-background/80 backdrop-blur-md",\n        },\n        false: {\n          backdrop: "relative",\n        },\n      },\n    },\n  });\n</script>\n\n<script lang="ts" setup>\n  defineOptions({ inheritAttrs: false });\n  const props = withDefaults(defineProps<LoaderProps>(), {\n    icon: "svg-spinners:bars-rotate-fade",\n    role: "progressbar",\n    closeOnEscape: true,\n  });\n\n  const open = defineModel<boolean>({ default: true });\n  const isLocked = useBodyScrollLock();\n\n  const { escape } = useMagicKeys();\n\n  watchEffect(() => {\n    if (props.fullPage && open.value && escape?.value && props.closeOnEscape) {\n      open.value = false;\n    }\n    if (props.lockScroll && !open.value) {\n      isLocked.value = false;\n    }\n    if (props.lockScroll && open.value) {\n      isLocked.value = true;\n    }\n  });\n</script>\n',
       },
     ],
+    deps: ["@morev/vue-transitions"],
+    nuxtModules: ["@morev/vue-transitions/nuxt"],
+    devDeps: ["@iconify-json/svg-spinners"],
     utils: [],
     composables: [],
     plugins: [],
@@ -1883,7 +1913,7 @@ export default [
         fileName: "Progress/Progress.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <ProgressRoot v-bind="forwarded" :class="styles({ class: props.class })">\n    <slot>\n      <UiProgressIndicator :style="{ transform: `translateX(-${100 - (modelValue || 0)}%)` }" />\n    </slot>\n  </ProgressRoot>\n</template>\n\n<script lang="ts" setup>\n  import { ProgressRoot, useForwardPropsEmits } from "radix-vue";\n  import type { ProgressRootEmits, ProgressRootProps } from "radix-vue";\n\n  const props = defineProps<\n    ProgressRootProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n\n  const emits = defineEmits<ProgressRootEmits>();\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n  const styles = tv({\n    base: "relative h-3 w-full overflow-hidden rounded-full bg-secondary",\n  });\n</script>\n',
+          '<template>\n  <ProgressRoot v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n    <slot>\n      <UiProgressIndicator\n        :style="{ transform: `translateX(-${100 - ((modelValue || 0) / max) * 100}%)` }"\n      />\n    </slot>\n  </ProgressRoot>\n</template>\n\n<script lang="ts" setup>\n  import { ProgressRoot, useForwardPropsEmits } from "radix-vue";\n  import type { ProgressRootEmits, ProgressRootProps } from "radix-vue";\n\n  defineOptions({ inheritAttrs: false });\n  const props = withDefaults(\n    defineProps<\n      ProgressRootProps & {\n        /** Custom class(es) to add to the parent */\n        class?: any;\n      }\n    >(),\n    {\n      max: 100,\n      modelValue: 0,\n    }\n  );\n\n  const emits = defineEmits<ProgressRootEmits>();\n  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n  const styles = tv({\n    base: "relative h-3 w-full overflow-hidden rounded-full bg-secondary",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -2907,7 +2937,7 @@ export default [
     plugins: [],
   },
   {
-    name: "Form Builder",
+    name: "Vee Form Builder",
     value: "vee-form-builder",
     deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
     askValidator: true,
@@ -2927,13 +2957,14 @@ export default [
       "vee-tags-input",
       "vee-radio-group",
       "vee-vue-form-slider",
+      "vee-native-checkbox",
     ],
     files: [
       {
         fileName: "FormBuilder/FormBuilder.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <div>\n    <template v-for="(field, index) in fields" :key="index">\n      <template v-if="field.variant === \'Checkbox\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeCheckbox v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Input\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Divider\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiDivider v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'CurrencyInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeCurrencyInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'DateField\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeDateField v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Textarea\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeTextarea v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'FileInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeFileInput :name="field.name" v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'MultiSelect\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeMultiSelect v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Select\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeSelect v-bind="removeFields(field)">\n              <template v-for="(option, optIndex) in field.options" :key="optIndex">\n                <option v-bind="option">{{ option.label }}</option>\n              </template>\n            </UiVeeSelect>\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'RadioGroup\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeRadioGroup :name="field.name" v-bind="removeFields(field)">\n              <template v-for="(option, optIndex) in field.options" :key="optIndex">\n                <div class="mb-2 flex items-center gap-3">\n                  <UiRadioGroupItem :id="option.value" :value="option.value" />\n                  <UiLabel :for="option.value">{{ option.label }}</UiLabel>\n                </div>\n              </template>\n            </UiVeeRadioGroup>\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'PinInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeePinInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'TagsInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeTagsInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'VueformSlider\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeVueFormSlider v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n    </template>\n  </div>\n</template>\n\n<script lang="ts">\n  export type FormBuilder = {\n    description?: string;\n    hint?: string;\n    disabled?: boolean;\n    label?: string;\n    name: string;\n    placeholder?: string;\n    required?: boolean;\n    type?: string;\n    value?: any;\n    rules?: any;\n    class?: any;\n    slot?: string;\n    wrapperClass?: any;\n    renderIf?: () => boolean;\n    options?: any[];\n    variant:\n      | "Checkbox"\n      | "Input"\n      | "Divider"\n      | "CurrencyInput"\n      | "DateField"\n      | "FileInput"\n      | "Select"\n      | "Textarea"\n      | "MultiSelect"\n      | "PinInput"\n      | "TagsInput"\n      | "RadioGroup"\n      | "VueformSlider";\n    [key: string]: any;\n  };\n  export type FormBuilderProps = {\n    fields: FormBuilder[];\n  };\n</script>\n<script lang="ts" setup>\n  defineProps<FormBuilderProps>();\n\n  const omit = (obj: FormBuilder, keys: Array<keyof FormBuilder>) =>\n    Object.fromEntries(\n      Object.entries(obj).filter(([key]) => !keys.includes(key as keyof FormBuilder))\n    );\n\n  const removeFields = (field: FormBuilder) => {\n    return omit(field, ["wrapperClass", "renderIf", "variant", "slot"]);\n  };\n</script>\n',
+          '<template>\n  <div>\n    <template v-for="(field, index) in fields" :key="index">\n      <template v-if="field.variant === \'Checkbox\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeCheckbox v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Input\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Divider\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiDivider v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'CurrencyInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeCurrencyInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'DateField\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeDateField v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Textarea\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeTextarea v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'FileInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeFileInput :name="field.name" v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'MultiSelect\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeMultiSelect v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'Select\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeSelect v-bind="removeFields(field)">\n              <template v-for="(option, optIndex) in field.options" :key="optIndex">\n                <option v-bind="option">{{ option.label }}</option>\n              </template>\n            </UiVeeSelect>\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'RadioGroup\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeRadioGroup :name="field.name" v-bind="removeFields(field)">\n              <template v-for="(option, optIndex) in field.options" :key="optIndex">\n                <div class="mb-2 flex items-center gap-3">\n                  <UiRadioGroupItem :id="option.value" :value="option.value" />\n                  <UiLabel :for="option.value">{{ option.label }}</UiLabel>\n                </div>\n              </template>\n            </UiVeeRadioGroup>\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'PinInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeePinInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'TagsInput\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeTagsInput v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'VueformSlider\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeVueFormSlider v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n      <template v-if="field.variant === \'NativeCheckbox\'">\n        <slot\n          v-if="field.renderIf ? field.renderIf() : true"\n          :name="field.slot ? field.slot : field.name"\n          v-bind="field"\n        >\n          <div :class="field.wrapperClass">\n            <UiVeeNativeCheckbox v-bind="removeFields(field)" />\n          </div>\n        </slot>\n      </template>\n    </template>\n  </div>\n</template>\n\n<script lang="ts">\n  export type FormBuilder = {\n    description?: string;\n    hint?: string;\n    disabled?: boolean;\n    label?: string;\n    name: string;\n    placeholder?: string;\n    required?: boolean;\n    type?: string;\n    value?: any;\n    rules?: any;\n    class?: any;\n    slot?: string;\n    wrapperClass?: any;\n    renderIf?: () => boolean;\n    options?: any[];\n    variant:\n      | "Checkbox"\n      | "NativeCheckbox"\n      | "Input"\n      | "Divider"\n      | "CurrencyInput"\n      | "DateField"\n      | "FileInput"\n      | "Select"\n      | "Textarea"\n      | "MultiSelect"\n      | "PinInput"\n      | "TagsInput"\n      | "RadioGroup"\n      | "VueformSlider";\n    [key: string]: any;\n  };\n  export type FormBuilderProps = {\n    fields: FormBuilder[];\n  };\n</script>\n<script lang="ts" setup>\n  defineProps<FormBuilderProps>();\n\n  const omit = (obj: FormBuilder, keys: Array<keyof FormBuilder>) =>\n    Object.fromEntries(\n      Object.entries(obj).filter(([key]) => !keys.includes(key as keyof FormBuilder))\n    );\n\n  const removeFields = (field: FormBuilder) => {\n    return omit(field, ["wrapperClass", "renderIf", "variant", "slot"]);\n  };\n</script>\n',
       },
     ],
     utils: [],
@@ -2978,6 +3009,25 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "Vee Checkbox - Native",
+    value: "vee-native-checkbox",
+    deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
+    askValidator: true,
+    nuxtModules: ["@vee-validate/nuxt", "@morev/vue-transitions/nuxt"],
+    components: ["label"],
+    files: [
+      {
+        fileName: "Vee/NativeCheckbox.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <div>\n    <div :class="nativeCheckboxStyles().wrapper({ class: props.wrapperClass })">\n      <!-- eslint-disable-next-line vue/html-self-closing -->\n      <input\n        :id="inputId"\n        :checked="checked"\n        type="checkbox"\n        :data-indeterminate="indeterminate"\n        :data-checked="checked"\n        :data-disabled="disabled"\n        :data-required="required"\n        :class="\n          nativeCheckboxStyles().checkbox({\n            error: !!errorMessage,\n            disabled,\n            size,\n            color,\n            class: props.class,\n          })\n        "\n        v-bind="{ ...forwarded, ...$attrs }"\n        @change="handleChange"\n        @input="handleChange"\n      />\n      <label\n        v-if="hasLabel || hasDescription || errorMessage"\n        :for="inputId"\n        class="flex flex-col gap-1 text-sm leading-none"\n      >\n        <slot name="label">\n          <span\n            v-if="label"\n            :class="nativeCheckboxStyles().label({ disabled, class: props.labelClass })"\n            >{{ label }}</span\n          >\n        </slot>\n        <slot name="description">\n          <span\n            v-if="description"\n            :class="nativeCheckboxStyles().description({ disabled, class: props.descriptionClass })"\n            >{{ description }}</span\n          >\n        </slot>\n        <TransitionSlide tag="template">\n          <p v-if="errorMessage" :class="nativeCheckboxStyles().error({ disabled })">\n            {{ errorMessage }}\n          </p>\n        </TransitionSlide>\n      </label>\n    </div>\n  </div>\n</template>\n\n<script lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import type { VariantProps } from "tailwind-variants";\n\n  export const nativeCheckboxStyles = tv({\n    slots: {\n      checkbox:\n        "peer form-checkbox shrink-0 cursor-pointer rounded-sm border border-primary bg-background outline-none ring-offset-background transition duration-200 focus:ring-offset-background",\n      label: "cursor-pointer font-medium",\n      description: "text-pretty text-muted-foreground",\n      wrapper: "flex items-start gap-3",\n      error: "text-destructive",\n    },\n    variants: {\n      size: { sm: { checkbox: "size-4" }, md: { checkbox: "size-[18px]" } },\n      color: {\n        red: { checkbox: "border-red-500 text-red-500 focus:ring-red-500" },\n        orange: { checkbox: "border-orange-500 text-orange-500 focus:ring-orange-500" },\n        amber: { checkbox: "border-amber-500 text-amber-500 focus:ring-amber-500" },\n        yellow: { checkbox: "border-yellow-500 text-yellow-500 focus:ring-yellow-500" },\n        lime: { checkbox: "border-lime-500 text-lime-500 focus:ring-lime-500" },\n        green: { checkbox: "border-green-500 text-green-500 focus:ring-green-500" },\n        emerald: { checkbox: "border-emerald-500 text-emerald-500 focus:ring-emerald-500" },\n        teal: { checkbox: "border-teal-500 text-teal-500 focus:ring-teal-500" },\n        cyan: { checkbox: "border-cyan-500 text-cyan-500 focus:ring-cyan-500" },\n        sky: { checkbox: "border-sky-500 text-sky-500 focus:ring-sky-500" },\n        blue: { checkbox: "border-blue-500 text-blue-500 focus:ring-blue-500" },\n        indigo: { checkbox: "border-indigo-500 text-indigo-500 focus:ring-indigo-500" },\n        violet: { checkbox: "border-violet-500 text-violet-500 focus:ring-violet-500" },\n        purple: { checkbox: "border-purple-500 text-purple-500 focus:ring-purple-500" },\n        fuchsia: { checkbox: "border-fuchsia-500 text-fuchsia-500 focus:ring-fuchsia-500" },\n        pink: { checkbox: "border-pink-500 text-pink-500 focus:ring-pink-500" },\n        rose: { checkbox: "border-rose-500 text-rose-500 focus:ring-rose-500" },\n        slate: { checkbox: "border-slate-600 text-slate-600 focus:ring-slate-600" },\n        gray: { checkbox: "border-gray-600 text-gray-600 focus:ring-gray-600" },\n        zinc: { checkbox: "border-zinc-600 text-zinc-600 focus:ring-zinc-600" },\n        neutral: { checkbox: "border-neutral-600 text-neutral-600 focus:ring-neutral-600" },\n        stone: { checkbox: "border-stone-600 text-stone-600 focus:ring-stone-600" },\n      },\n      error: {\n        true: { checkbox: "border-destructive text-destructive focus:ring-destructive" },\n      },\n      disabled: {\n        true: {\n          checkbox: "pointer-events-none opacity-50",\n          label: "cursor-not-allowed opacity-50",\n          description: "cursor-not-allowed opacity-50",\n          error: "cursor-not-allowed opacity-70",\n        },\n      },\n    },\n    defaultVariants: {\n      color: "blue",\n      size: "md",\n    },\n  });\n\n  export type NativeCheckboxProps = {\n    /** Custom class(es) to add to the element */\n    class?: any;\n    /** Custom class(es) to add to the label element */\n    labelClass?: any;\n    /** Custom class(es) to add to the description element */\n    descriptionClass?: any;\n    /** Custom class(es) to add to the wrapper element */\n    wrapperClass?: any;\n    /** The id of the checkbox input element */\n    id?: string;\n    /** The v-model binding for the checkbox */\n    modelValue?: any;\n    /** The name of the checkbox input element */\n    name?: string;\n    /** The value of the checkbox input element */\n    value?: any;\n    /** Whether the checkbox is disabled */\n    disabled?: boolean;\n    /** Whether the checkbox is required */\n    required?: boolean;\n    /** Whether the checkbox is indeterminate */\n    indeterminate?: boolean;\n    /**\n     * The color variant of the checkbox\n     *\n     * @default blue\n     */\n    color?: VariantProps<typeof nativeCheckboxStyles>["color"];\n    /**\n     * The size variant of the checkbox\n     *\n     * @default md\n     */\n    size?: VariantProps<typeof nativeCheckboxStyles>["size"];\n    /** The label for the checkbox */\n    label?: string;\n    /** The description for the checkbox */\n    description?: string;\n    /** The validation rules for the checkbox */\n    rules?: any;\n    /** Whether to validate the checkbox on mount */\n    validateOnMount?: boolean;\n    /** The value to use when the checkbox is unchecked */\n    unCheckedValue?: any;\n  };\n</script>\n\n<script lang="ts" setup>\n  defineOptions({ inheritAttrs: false });\n  const props = withDefaults(defineProps<NativeCheckboxProps>(), {});\n  const inputId = props.id || `checkbox-${useId()}`;\n\n  const forwarded = reactiveOmit(\n    props,\n    "class",\n    "id",\n    "modelValue",\n    "label",\n    "description",\n    "color",\n    "size",\n    "labelClass",\n    "descriptionClass",\n    "wrapperClass",\n    "rules",\n    "validateOnMount",\n    "unCheckedValue"\n  );\n  const slots = useSlots();\n  const hasLabel = computed(() => !!slots.label || !!props.label);\n  const hasDescription = computed(() => !!slots.description || !!props.description);\n\n  const { errorMessage, checked, handleChange } = useField(\n    () => props.name || inputId,\n    props.rules,\n    {\n      initialValue: props.modelValue,\n      syncVModel: true,\n      label: props.label,\n      validateOnMount: props.validateOnMount,\n      type: "checkbox",\n      checkedValue: props.value || true,\n      uncheckedValue: props.unCheckedValue || false,\n    }\n  );\n</script>\n',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Vee NumberField",
     value: "vee-number-field",