ui-thing 0.1.13 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/index.js +3526 -3361
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/comps.ts +179 -164
package/src/comps.ts CHANGED
@@ -20,7 +20,7 @@ export default [
20
20
  fileName: "Accordion/Header.vue",
21
21
  dirPath: "components/UI",
22
22
  fileContent:
23
- '<template>\n <AccordionHeader v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </AccordionHeader>\n</template>\n\n<script lang="ts" setup>\n import { AccordionHeader } from "radix-vue";\n import type { AccordionHeaderProps } from "radix-vue";\n\n const props = defineProps<\n AccordionHeaderProps & {\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "flex",\n });\n</script>\n',
23
+ '<template>\n <AccordionHeader v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot />\n </AccordionHeader>\n</template>\n\n<script lang="ts" setup>\n import { AccordionHeader } from "radix-vue";\n import type { AccordionHeaderProps } from "radix-vue";\n\n const props = defineProps<\n AccordionHeaderProps & {\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "flex",\n });\n</script>\n',
24
24
  },
25
25
  {
26
26
  fileName: "Accordion/Item.vue",
@@ -102,7 +102,7 @@ export default [
102
102
  fileName: "AlertDialog/Content.vue",
103
103
  dirPath: "components/UI",
104
104
  fileContent:
105
- '<template>\n <UiAlertDialogPortal :to="to">\n <slot name="overlay">\n <UiAlertDialogOverlay />\n </slot>\n <AlertDialogContent\n :class="styles({ class: props.class })"\n v-bind="{ ...forwarded, ...$attrs }"\n >\n <slot/>\n </AlertDialogContent>\n </UiAlertDialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogContent, useForwardPropsEmits } from "radix-vue";\n import type { AlertDialogContentEmits, AlertDialogContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<\n AlertDialogContentProps & {\n /** Custom class(es) to add to the `AlertDialogContent` */\n class?: any;\n /** The element to render the portal into */\n to?: string | HTMLElement;\n }\n >();\n const emit = defineEmits<AlertDialogContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emit);\n\n const styles = tv({\n base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",\n });\n</script>\n',
105
+ '<template>\n <UiAlertDialogPortal :to="to">\n <slot name="overlay">\n <UiAlertDialogOverlay />\n </slot>\n <AlertDialogContent\n :class="styles({ class: props.class })"\n v-bind="{ ...forwarded, ...$attrs }"\n >\n <slot />\n </AlertDialogContent>\n </UiAlertDialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogContent, useForwardPropsEmits } from "radix-vue";\n import type { AlertDialogContentEmits, AlertDialogContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<\n AlertDialogContentProps & {\n /** Custom class(es) to add to the `AlertDialogContent` */\n class?: any;\n /** The element to render the portal into */\n to?: string | HTMLElement;\n }\n >();\n const emit = defineEmits<AlertDialogContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emit);\n\n const styles = tv({\n base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",\n });\n</script>\n',
106
106
  },
107
107
  {
108
108
  fileName: "AlertDialog/Description.vue",
@@ -132,7 +132,7 @@ export default [
132
132
  fileName: "AlertDialog/Portal.vue",
133
133
  dirPath: "components/UI",
134
134
  fileContent:
135
- '<template>\n <AlertDialogPortal v-bind="props">\n <slot/>\n </AlertDialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogPortal } from "radix-vue";\n import type { AlertDialogPortalProps } from "radix-vue";\n\n const props = defineProps<AlertDialogPortalProps>();\n</script>\n',
135
+ '<template>\n <AlertDialogPortal v-bind="props">\n <slot />\n </AlertDialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogPortal } from "radix-vue";\n import type { AlertDialogPortalProps } from "radix-vue";\n\n const props = defineProps<AlertDialogPortalProps>();\n</script>\n',
136
136
  },
137
137
  {
138
138
  fileName: "AlertDialog/Title.vue",
@@ -174,7 +174,7 @@ export default [
174
174
  fileName: "Autocomplete/Anchor.vue",
175
175
  dirPath: "components/UI",
176
176
  fileContent:
177
- '<template>\n <ComboboxAnchor v-bind="props">\n <slot/>\n </ComboboxAnchor>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxAnchor } from "radix-vue";\n import type { ComboboxAnchorProps } from "radix-vue";\n\n const props = defineProps<ComboboxAnchorProps>();\n</script>\n',
177
+ '<template>\n <ComboboxAnchor v-bind="props">\n <slot />\n </ComboboxAnchor>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxAnchor } from "radix-vue";\n import type { ComboboxAnchorProps } from "radix-vue";\n\n const props = defineProps<ComboboxAnchorProps>();\n</script>\n',
178
178
  },
179
179
  {
180
180
  fileName: "Autocomplete/Arrow.vue",
@@ -186,13 +186,13 @@ export default [
186
186
  fileName: "Autocomplete/Autocomplete.vue",
187
187
  dirPath: "components/UI",
188
188
  fileContent:
189
- '<template>\n <ComboboxRoot v-bind="forwarded">\n <slot/>\n </ComboboxRoot>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";\n\n const props = defineProps<ComboboxRootProps>();\n\n const emits = defineEmits<ComboboxRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
189
+ '<template>\n <ComboboxRoot v-bind="forwarded">\n <slot />\n </ComboboxRoot>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";\n\n const props = defineProps<ComboboxRootProps>();\n\n const emits = defineEmits<ComboboxRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
190
190
  },
191
191
  {
192
192
  fileName: "Autocomplete/Cancel.vue",
193
193
  dirPath: "components/UI",
194
194
  fileContent:
195
- '<template>\n <ComboboxCancel v-bind="props">\n <slot/>\n </ComboboxCancel>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxCancel } from "radix-vue";\n import type { ComboboxCancelProps } from "radix-vue";\n\n const props = defineProps<ComboboxCancelProps>();\n</script>\n',
195
+ '<template>\n <ComboboxCancel v-bind="props">\n <slot />\n </ComboboxCancel>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxCancel } from "radix-vue";\n import type { ComboboxCancelProps } from "radix-vue";\n\n const props = defineProps<ComboboxCancelProps>();\n</script>\n',
196
196
  },
197
197
  {
198
198
  fileName: "Autocomplete/Content.vue",
@@ -204,13 +204,13 @@ export default [
204
204
  fileName: "Autocomplete/Empty.vue",
205
205
  dirPath: "components/UI",
206
206
  fileContent:
207
- '<template>\n <ComboboxEmpty v-bind="props">\n <slot/>\n </ComboboxEmpty>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxEmpty } from "radix-vue";\n import type { ComboboxEmptyProps } from "radix-vue";\n\n const props = defineProps<ComboboxEmptyProps>();\n</script>\n',
207
+ '<template>\n <ComboboxEmpty v-bind="props">\n <slot />\n </ComboboxEmpty>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxEmpty } from "radix-vue";\n import type { ComboboxEmptyProps } from "radix-vue";\n\n const props = defineProps<ComboboxEmptyProps>();\n</script>\n',
208
208
  },
209
209
  {
210
210
  fileName: "Autocomplete/Group.vue",
211
211
  dirPath: "components/UI",
212
212
  fileContent:
213
- '<template>\n <ComboboxGroup v-bind="props">\n <slot/>\n </ComboboxGroup>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxGroup } from "radix-vue";\n import type { ComboboxGroupProps } from "radix-vue";\n\n const props = defineProps<ComboboxGroupProps>();\n</script>\n',
213
+ '<template>\n <ComboboxGroup v-bind="props">\n <slot />\n </ComboboxGroup>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxGroup } from "radix-vue";\n import type { ComboboxGroupProps } from "radix-vue";\n\n const props = defineProps<ComboboxGroupProps>();\n</script>\n',
214
214
  },
215
215
  {
216
216
  fileName: "Autocomplete/Input.vue",
@@ -222,7 +222,7 @@ export default [
222
222
  fileName: "Autocomplete/Item.vue",
223
223
  dirPath: "components/UI",
224
224
  fileContent:
225
- '<template>\n <ComboboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <slot name="icon">\n <span class="absolute inset-y-0 left-2 flex items-center justify-center">\n <UiAutocompleteItemIndicator class="animate-in fade-in-0 zoom-in-0" :icon="icon" />\n </span>\n </slot>\n <slot/>\n </ComboboxItem>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxItem, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxItemProps & {\n class?: any;\n icon?: string;\n }\n >();\n\n const emits = defineEmits<{\n select: ComboboxItemEmits["select"];\n }>();\n const forwarded = useForwardPropsEmits(props, emits);\n\n const styles = tv({\n base: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 pl-9 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n });\n</script>\n',
225
+ '<template>\n <ComboboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <slot name="icon">\n <span class="absolute inset-y-0 left-2 flex items-center justify-center">\n <UiAutocompleteItemIndicator class="animate-in fade-in-0 zoom-in-0" :icon="icon" />\n </span>\n </slot>\n <slot />\n </ComboboxItem>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxItem, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxItemProps & {\n class?: any;\n icon?: string;\n }\n >();\n\n const emits = defineEmits<{\n select: ComboboxItemEmits["select"];\n }>();\n const forwarded = useForwardPropsEmits(props, emits);\n\n const styles = tv({\n base: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 pl-9 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n });\n</script>\n',
226
226
  },
227
227
  {
228
228
  fileName: "Autocomplete/ItemIndicator.vue",
@@ -234,31 +234,31 @@ export default [
234
234
  fileName: "Autocomplete/Label.vue",
235
235
  dirPath: "components/UI",
236
236
  fileContent:
237
- '<template>\n <ComboboxLabel :class="styles({ class: props.class })" v-bind="props">\n <slot/>\n </ComboboxLabel>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxLabel } from "radix-vue";\n import type { ComboboxLabelProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxLabelProps & {\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "px-2 py-1.5 pl-9 text-sm font-medium text-muted-foreground",\n });\n</script>\n',
237
+ '<template>\n <ComboboxLabel :class="styles({ class: props.class })" v-bind="props">\n <slot />\n </ComboboxLabel>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxLabel } from "radix-vue";\n import type { ComboboxLabelProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxLabelProps & {\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "px-2 py-1.5 pl-9 text-sm font-medium text-muted-foreground",\n });\n</script>\n',
238
238
  },
239
239
  {
240
240
  fileName: "Autocomplete/Portal.vue",
241
241
  dirPath: "components/UI",
242
242
  fileContent:
243
- '<template>\n <ComboboxPortal v-bind="props">\n <slot/>\n </ComboboxPortal>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxPortal } from "radix-vue";\n import type { ComboboxPortalProps } from "radix-vue";\n\n const props = defineProps<ComboboxPortalProps>();\n</script>\n',
243
+ '<template>\n <ComboboxPortal v-bind="props">\n <slot />\n </ComboboxPortal>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxPortal } from "radix-vue";\n import type { ComboboxPortalProps } from "radix-vue";\n\n const props = defineProps<ComboboxPortalProps>();\n</script>\n',
244
244
  },
245
245
  {
246
246
  fileName: "Autocomplete/Separator.vue",
247
247
  dirPath: "components/UI",
248
248
  fileContent:
249
- '<template>\n <ComboboxSeparator v-bind="props">\n <slot/>\n </ComboboxSeparator>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxSeparator } from "radix-vue";\n import type { ComboboxSeparatorProps } from "radix-vue";\n\n const props = defineProps<ComboboxSeparatorProps>();\n</script>\n',
249
+ '<template>\n <ComboboxSeparator v-bind="props">\n <slot />\n </ComboboxSeparator>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxSeparator } from "radix-vue";\n import type { ComboboxSeparatorProps } from "radix-vue";\n\n const props = defineProps<ComboboxSeparatorProps>();\n</script>\n',
250
250
  },
251
251
  {
252
252
  fileName: "Autocomplete/Trigger.vue",
253
253
  dirPath: "components/UI",
254
254
  fileContent:
255
- '<template>\n <ComboboxTrigger v-bind="props">\n <slot/>\n </ComboboxTrigger>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxTrigger } from "radix-vue";\n import type { ComboboxTriggerProps } from "radix-vue";\n\n const props = defineProps<ComboboxTriggerProps>();\n</script>\n',
255
+ '<template>\n <ComboboxTrigger v-bind="props">\n <slot />\n </ComboboxTrigger>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxTrigger } from "radix-vue";\n import type { ComboboxTriggerProps } from "radix-vue";\n\n const props = defineProps<ComboboxTriggerProps>();\n</script>\n',
256
256
  },
257
257
  {
258
258
  fileName: "Autocomplete/Viewport.vue",
259
259
  dirPath: "components/UI",
260
260
  fileContent:
261
- '<template>\n <ComboboxViewport v-bind="props">\n <slot/>\n </ComboboxViewport>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxViewport } from "radix-vue";\n import type { ComboboxViewportProps } from "radix-vue";\n\n const props = defineProps<ComboboxViewportProps>();\n</script>\n',
261
+ '<template>\n <ComboboxViewport v-bind="props">\n <slot />\n </ComboboxViewport>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxViewport } from "radix-vue";\n import type { ComboboxViewportProps } from "radix-vue";\n\n const props = defineProps<ComboboxViewportProps>();\n</script>\n',
262
262
  },
263
263
  ],
264
264
  utils: [],
@@ -300,7 +300,7 @@ export default [
300
300
  fileName: "Badge.vue",
301
301
  dirPath: "components/UI",
302
302
  fileContent:
303
- '<template>\n <component\n :is="elementType"\n :to="to"\n :href="href"\n :disabled="disabled"\n :class="badgeVariants({ disabled, variant, class: props.class })"\n @click="onClick"\n >\n <slot/>\n </component>\n</template>\n\n<script lang="ts" setup>\n const badgeVariants = tv({\n base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",\n variants: {\n variant: {\n default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",\n secondary:\n "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",\n destructive:\n "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",\n outline: "text-foreground",\n },\n disabled: {\n true: "cursor-not-allowed opacity-50",\n },\n },\n defaultVariants: {\n variant: "default",\n },\n });\n\n type BadgeProps = VariantProps<typeof badgeVariants>;\n\n const props = defineProps<{\n class?: any;\n variant?: BadgeProps["variant"];\n onClick?: () => void;\n to?: string;\n href?: string;\n disabled?: boolean;\n tag?: string;\n }>();\n\n const elementType = computed(() => {\n if (props.tag) return props.tag;\n if (props.href || props.to) return resolveComponent("NuxtLink");\n return props.tag || "div";\n });\n</script>\n',
303
+ '<template>\n <component\n :is="elementType"\n :to="to"\n :href="href"\n :disabled="disabled"\n :class="badgeVariants({ disabled, variant, class: props.class })"\n @click="onClick"\n >\n <slot />\n </component>\n</template>\n\n<script lang="ts" setup>\n const badgeVariants = tv({\n base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",\n variants: {\n variant: {\n default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",\n secondary:\n "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",\n destructive:\n "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",\n outline: "text-foreground",\n },\n disabled: {\n true: "cursor-not-allowed opacity-50",\n },\n },\n defaultVariants: {\n variant: "default",\n },\n });\n\n type BadgeProps = VariantProps<typeof badgeVariants>;\n\n const props = defineProps<{\n class?: any;\n variant?: BadgeProps["variant"];\n onClick?: () => void;\n to?: string;\n href?: string;\n disabled?: boolean;\n tag?: string;\n }>();\n\n const elementType = computed(() => {\n if (props.tag) return props.tag;\n if (props.href || props.to) return resolveComponent("NuxtLink");\n return props.tag || "div";\n });\n</script>\n',
304
304
  },
305
305
  ],
306
306
  utils: [],
@@ -355,7 +355,7 @@ export default [
355
355
  fileName: "Calendar.vue",
356
356
  dirPath: "components/UI",
357
357
  fileContent:
358
- '<template>\n <ClientOnly>\n <VCalendar\n :trim-weeks="props.trimWeeks || true"\n :is-dark="$colorMode.value == \'dark\'"\n v-bind="$attrs"\n >\n <template v-for="(_, slot) in $slots" #[slot]="scope">\n <slot :name="slot" v-bind="scope"/>\n </template>\n </VCalendar>\n </ClientOnly>\n</template>\n\n<script lang="ts" setup>\n import type { Calendar } from "v-calendar";\n\n defineOptions({ inheritAttrs: false });\n\n interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof Calendar>["$props"]> {}\n\n const props = defineProps<Props & { trimWeeks?: boolean }>();\n</script>\n\n<style>\n :root {\n --vc-font-family: var(--font-sans);\n --vc-rounded-full: var(--radius);\n --vc-font-bold: 500;\n --vc-font-semibold: 600;\n --vc-text-lg: 16px;\n }\n\n .vc-light,\n .vc-dark {\n --vc-bg: theme("colors.background");\n --vc-border: theme("colors.border");\n --vc-focus-ring: 0 0 0 3px hsl(var(--primary) / 30%);\n --vc-weekday-color: theme("colors.muted.foreground");\n --vc-popover-content-color: theme("colors.popover.foreground");\n --vc-hover-bg: theme("colors.accent.DEFAULT");\n --vc-popover-content-bg: theme("colors.popover.DEFAULT");\n --vc-popover-content-border: theme("colors.border");\n --vc-header-arrow-hover-bg: theme("colors.accent.DEFAULT");\n --vc-weeknumber-color: theme("colors.muted.foreground");\n --vc-nav-hover-bg: theme("colors.accent.DEFAULT");\n\n --vc-nav-item-active-color: theme("colors.primary.foreground");\n --vc-nav-item-active-bg: theme("colors.primary.DEFAULT");\n\n &.vc-attr,\n & .vc-attr {\n --vc-content-color: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-bg: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-border: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-content-color: theme("colors.primary.foreground");\n --vc-highlight-light-bg: var(--vc-accent-200); /* Highlighted color between two dates */\n --vc-highlight-light-content-color: theme("colors.secondary.foreground");\n --vc-highlight-solid-bg: theme("colors.primary.DEFAULT");\n --vc-highlight-solid-content-color: theme("colors.primary.foreground");\n }\n }\n\n .vc-blue {\n --vc-accent-200: theme("colors.primary.DEFAULT / 20%");\n --vc-accent-400: theme("colors.primary.DEFAULT");\n --vc-accent-500: theme("colors.primary.DEFAULT");\n --vc-accent-600: theme("colors.primary.DEFAULT / 70%");\n }\n\n .dark {\n .vc-blue {\n --vc-accent-200: theme("colors.primary.DEFAULT / 20%");\n --vc-accent-400: theme("colors.primary.DEFAULT");\n --vc-accent-500: theme("colors.primary.DEFAULT / 70%");\n }\n }\n .vc-header .vc-title {\n @apply font-medium;\n }\n .vc-weekdays {\n @apply my-2 font-normal;\n }\n .vc-day-content,\n .vc-day,\n .vc-highlight {\n @apply h-9 w-9 rounded-md;\n }\n .vc-focus {\n @apply focus-within:shadow-none;\n }\n .vc-day {\n @apply mb-1.5;\n }\n\n .vc-base-icon {\n @apply h-4 w-4 stroke-1;\n }\n .vc-header .vc-arrow,\n .vc-nav-arrow {\n @apply h-7 w-7 rounded-md;\n border: 1px solid hsl(var(--border));\n }\n .vc-header .vc-prev,\n .vc-header .vc-next {\n @apply border;\n }\n .weekday-position-1 .vc-highlights {\n @apply rounded-l-md;\n }\n .weekday-position-7 .vc-highlights {\n @apply rounded-r-md;\n }\n .vc-highlight-bg-light {\n @apply bg-accent;\n }\n .vc-nav-item {\n @apply font-medium;\n }\n .vc-header .vc-title-wrapper {\n @apply decoration-accent-foreground/60 underline-offset-2 hover:underline;\n }\n .vc-highlights + .vc-day-content {\n @apply hover:bg-accent/5;\n }\n</style>\n',
358
+ '<template>\n <ClientOnly>\n <VCalendar\n :trim-weeks="props.trimWeeks || true"\n :is-dark="$colorMode.value == \'dark\'"\n v-bind="$attrs"\n >\n <template v-for="(_, slot) in $slots" #[slot]="scope">\n <slot :name="slot" v-bind="scope" />\n </template>\n </VCalendar>\n </ClientOnly>\n</template>\n\n<script lang="ts" setup>\n import type { Calendar } from "v-calendar";\n\n defineOptions({ inheritAttrs: false });\n\n interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof Calendar>["$props"]> {}\n\n const props = defineProps<Props & { trimWeeks?: boolean }>();\n</script>\n\n<style>\n :root {\n --vc-font-family: var(--font-sans);\n --vc-rounded-full: var(--radius);\n --vc-font-bold: 500;\n --vc-font-semibold: 600;\n --vc-text-lg: 16px;\n }\n\n .vc-light,\n .vc-dark {\n --vc-bg: theme("colors.background");\n --vc-border: theme("colors.border");\n --vc-focus-ring: 0 0 0 3px hsl(var(--primary) / 30%);\n --vc-weekday-color: theme("colors.muted.foreground");\n --vc-popover-content-color: theme("colors.popover.foreground");\n --vc-hover-bg: theme("colors.accent.DEFAULT");\n --vc-popover-content-bg: theme("colors.popover.DEFAULT");\n --vc-popover-content-border: theme("colors.border");\n --vc-header-arrow-hover-bg: theme("colors.accent.DEFAULT");\n --vc-weeknumber-color: theme("colors.muted.foreground");\n --vc-nav-hover-bg: theme("colors.accent.DEFAULT");\n\n --vc-nav-item-active-color: theme("colors.primary.foreground");\n --vc-nav-item-active-bg: theme("colors.primary.DEFAULT");\n\n &.vc-attr,\n & .vc-attr {\n --vc-content-color: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-bg: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-border: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-content-color: theme("colors.primary.foreground");\n --vc-highlight-light-bg: var(--vc-accent-200); /* Highlighted color between two dates */\n --vc-highlight-light-content-color: theme("colors.secondary.foreground");\n --vc-highlight-solid-bg: theme("colors.primary.DEFAULT");\n --vc-highlight-solid-content-color: theme("colors.primary.foreground");\n }\n }\n\n .vc-blue {\n --vc-accent-200: theme("colors.primary.DEFAULT / 20%");\n --vc-accent-400: theme("colors.primary.DEFAULT");\n --vc-accent-500: theme("colors.primary.DEFAULT");\n --vc-accent-600: theme("colors.primary.DEFAULT / 70%");\n }\n\n .dark {\n .vc-blue {\n --vc-accent-200: theme("colors.primary.DEFAULT / 20%");\n --vc-accent-400: theme("colors.primary.DEFAULT");\n --vc-accent-500: theme("colors.primary.DEFAULT / 70%");\n }\n }\n .vc-header .vc-title {\n @apply font-medium;\n }\n .vc-weekdays {\n @apply my-2 font-normal;\n }\n .vc-day-content,\n .vc-day,\n .vc-highlight {\n @apply h-9 w-9 rounded-md;\n }\n .vc-focus {\n @apply focus-within:shadow-none;\n }\n .vc-day {\n @apply mb-1.5;\n }\n\n .vc-base-icon {\n @apply h-4 w-4 stroke-1;\n }\n .vc-header .vc-arrow,\n .vc-nav-arrow {\n @apply h-7 w-7 rounded-md;\n border: 1px solid hsl(var(--border));\n }\n .vc-header .vc-prev,\n .vc-header .vc-next {\n @apply border;\n }\n .weekday-position-1 .vc-highlights {\n @apply rounded-l-md;\n }\n .weekday-position-7 .vc-highlights {\n @apply rounded-r-md;\n }\n .vc-highlight-bg-light {\n @apply bg-accent;\n }\n .vc-nav-item {\n @apply font-medium;\n }\n .vc-header .vc-title-wrapper {\n @apply decoration-accent-foreground/60 underline-offset-2 hover:underline;\n }\n .vc-highlights + .vc-day-content {\n @apply hover:bg-accent/5;\n }\n</style>\n',
359
359
  },
360
360
  ],
361
361
  utils: [],
@@ -388,13 +388,13 @@ export default [
388
388
  fileName: "Card/Footer.vue",
389
389
  dirPath: "components/UI",
390
390
  fileContent:
391
- '<template>\n <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n { as: "div" }\n );\n\n const styles = tv({\n base: "flex items-center p-6 ",\n });\n</script>\n',
391
+ '<template>\n <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n { as: "div" }\n );\n\n const styles = tv({\n base: "flex items-center p-6 ",\n });\n</script>\n',
392
392
  },
393
393
  {
394
394
  fileName: "Card/Header.vue",
395
395
  dirPath: "components/UI",
396
396
  fileContent:
397
- '<template>\n <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n { as: "div" }\n );\n\n const styles = tv({\n base: "flex flex-col space-y-1.5 p-6 [&+*]:pt-0",\n });\n</script>\n',
397
+ '<template>\n <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n { as: "div" }\n );\n\n const styles = tv({\n base: "flex flex-col space-y-1.5 p-6 [&+*]:pt-0",\n });\n</script>\n',
398
398
  },
399
399
  {
400
400
  fileName: "Card/Title.vue",
@@ -436,19 +436,19 @@ export default [
436
436
  fileName: "Collapsible/Collapsible.vue",
437
437
  dirPath: "components/UI",
438
438
  fileContent:
439
- '<template>\n <CollapsibleRoot v-bind="forwarded">\n <slot/>\n </CollapsibleRoot>\n</template>\n\n<script lang="ts" setup>\n import { CollapsibleRoot, useForwardPropsEmits } from "radix-vue";\n import type { CollapsibleRootEmits, CollapsibleRootProps } from "radix-vue";\n\n const props = defineProps<CollapsibleRootProps>();\n\n const emit = defineEmits<CollapsibleRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
439
+ '<template>\n <CollapsibleRoot v-bind="forwarded">\n <slot />\n </CollapsibleRoot>\n</template>\n\n<script lang="ts" setup>\n import { CollapsibleRoot, useForwardPropsEmits } from "radix-vue";\n import type { CollapsibleRootEmits, CollapsibleRootProps } from "radix-vue";\n\n const props = defineProps<CollapsibleRootProps>();\n\n const emit = defineEmits<CollapsibleRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
440
440
  },
441
441
  {
442
442
  fileName: "Collapsible/Content.vue",
443
443
  dirPath: "components/UI",
444
444
  fileContent:
445
- '<template>\n <CollapsibleContent :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </CollapsibleContent>\n</template>\n\n<script lang="ts" setup>\n import { CollapsibleContent } from "radix-vue";\n import type { CollapsibleContentProps } from "radix-vue";\n\n const props = defineProps<\n CollapsibleContentProps & {\n /** Customer class(es) to add to the element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "overflow-hidden transition will-change-auto data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",\n });\n</script>\n',
445
+ '<template>\n <CollapsibleContent :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </CollapsibleContent>\n</template>\n\n<script lang="ts" setup>\n import { CollapsibleContent } from "radix-vue";\n import type { CollapsibleContentProps } from "radix-vue";\n\n const props = defineProps<\n CollapsibleContentProps & {\n /** Customer class(es) to add to the element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "overflow-hidden transition will-change-auto data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",\n });\n</script>\n',
446
446
  },
447
447
  {
448
448
  fileName: "Collapsible/Trigger.vue",
449
449
  dirPath: "components/UI",
450
450
  fileContent:
451
- '<template>\n <CollapsibleTrigger v-bind="forwarded">\n <slot/>\n </CollapsibleTrigger>\n</template>\n\n<script lang="ts" setup>\n import { CollapsibleTrigger, useForwardProps } from "radix-vue";\n import type { CollapsibleTriggerProps } from "radix-vue";\n\n const props = defineProps<CollapsibleTriggerProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
451
+ '<template>\n <CollapsibleTrigger v-bind="forwarded">\n <slot />\n </CollapsibleTrigger>\n</template>\n\n<script lang="ts" setup>\n import { CollapsibleTrigger, useForwardProps } from "radix-vue";\n import type { CollapsibleTriggerProps } from "radix-vue";\n\n const props = defineProps<CollapsibleTriggerProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
452
452
  },
453
453
  ],
454
454
  utils: [],
@@ -469,7 +469,7 @@ export default [
469
469
  fileName: "Command/Command.vue",
470
470
  dirPath: "components/UI",
471
471
  fileContent:
472
- '<template>\n <ComboboxRoot v-bind="forwarded" :open="true" :class="styles({ class: props.class })">\n <slot/>\n </ComboboxRoot>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";\n\n const props = defineProps<ComboboxRootProps & { class?: any }>();\n const emits = defineEmits<ComboboxRootEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",\n });\n</script>\n',
472
+ '<template>\n <ComboboxRoot v-bind="forwarded" :open="true" :class="styles({ class: props.class })">\n <slot />\n </ComboboxRoot>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";\n\n const props = defineProps<ComboboxRootProps & { class?: any }>();\n const emits = defineEmits<ComboboxRootEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",\n });\n</script>\n',
473
473
  },
474
474
  {
475
475
  fileName: "Command/Dialog.vue",
@@ -481,13 +481,13 @@ export default [
481
481
  fileName: "Command/Empty.vue",
482
482
  dirPath: "components/UI",
483
483
  fileContent:
484
- '<template>\n <ComboboxEmpty :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </ComboboxEmpty>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxEmpty } from "radix-vue";\n import type { ComboboxEmptyProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxEmptyProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "py-6 text-center text-sm",\n });\n</script>\n',
484
+ '<template>\n <ComboboxEmpty :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </ComboboxEmpty>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxEmpty } from "radix-vue";\n import type { ComboboxEmptyProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxEmptyProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "py-6 text-center text-sm",\n });\n</script>\n',
485
485
  },
486
486
  {
487
487
  fileName: "Command/Group.vue",
488
488
  dirPath: "components/UI",
489
489
  fileContent:
490
- '<template>\n <ComboboxGroup\n :class="styles({ class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'heading\')"\n >\n <slot name="heading">\n <UiCommandLabel v-if="heading" :label="heading" />\n </slot>\n <slot/>\n </ComboboxGroup>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxGroup } from "radix-vue";\n import type { ComboboxGroupProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxGroupProps & {\n /**The heading for the group */\n heading?: any;\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "overflow-hidden p-1 text-foreground",\n });\n</script>\n',
490
+ '<template>\n <ComboboxGroup\n :class="styles({ class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'heading\')"\n >\n <slot name="heading">\n <UiCommandLabel v-if="heading" :label="heading" />\n </slot>\n <slot />\n </ComboboxGroup>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxGroup } from "radix-vue";\n import type { ComboboxGroupProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxGroupProps & {\n /**The heading for the group */\n heading?: any;\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "overflow-hidden p-1 text-foreground",\n });\n</script>\n',
491
491
  },
492
492
  {
493
493
  fileName: "Command/Input.vue",
@@ -511,7 +511,7 @@ export default [
511
511
  fileName: "Command/List.vue",
512
512
  dirPath: "components/UI",
513
513
  fileContent:
514
- '<template>\n <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <slot/>\n </ComboboxContent>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxContent, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<\n ComboboxContentProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n\n const emits = defineEmits<ComboboxContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "max-h-[300px] overflow-y-auto overflow-x-hidden",\n });\n</script>\n',
514
+ '<template>\n <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <slot />\n </ComboboxContent>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxContent, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<\n ComboboxContentProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n\n const emits = defineEmits<ComboboxContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "max-h-[300px] overflow-y-auto overflow-x-hidden",\n });\n</script>\n',
515
515
  },
516
516
  {
517
517
  fileName: "Command/Separator.vue",
@@ -538,7 +538,7 @@ export default [
538
538
  fileName: "Container.vue",
539
539
  dirPath: "components/UI",
540
540
  fileContent:
541
- '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "container mx-auto",\n });\n</script>\n',
541
+ '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "container mx-auto",\n });\n</script>\n',
542
542
  },
543
543
  ],
544
544
  utils: [],
@@ -565,19 +565,19 @@ export default [
565
565
  fileName: "ContextMenu/Content.vue",
566
566
  dirPath: "components/UI",
567
567
  fileContent:
568
- '<template>\n <UiContextMenuPortal>\n <ContextMenuContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot/>\n </ContextMenuContent>\n </UiContextMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuContent, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuContentEmits, ContextMenuContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(\n defineProps<\n ContextMenuContentProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n loop: true,\n avoidCollisions: true,\n collisionPadding: 5,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<ContextMenuContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
568
+ '<template>\n <UiContextMenuPortal>\n <ContextMenuContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot />\n </ContextMenuContent>\n </UiContextMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuContent, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuContentEmits, ContextMenuContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(\n defineProps<\n ContextMenuContentProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n loop: true,\n avoidCollisions: true,\n collisionPadding: 5,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<ContextMenuContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
569
569
  },
570
570
  {
571
571
  fileName: "ContextMenu/ContextMenu.vue",
572
572
  dirPath: "components/UI",
573
573
  fileContent:
574
- '<template>\n <ContextMenuRoot v-bind="forwarded">\n <slot/>\n </ContextMenuRoot>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuRoot, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuRootEmits, ContextMenuRootProps } from "radix-vue";\n\n const props = defineProps<ContextMenuRootProps>();\n const emit = defineEmits<ContextMenuRootEmits>();\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
574
+ '<template>\n <ContextMenuRoot v-bind="forwarded">\n <slot />\n </ContextMenuRoot>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuRoot, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuRootEmits, ContextMenuRootProps } from "radix-vue";\n\n const props = defineProps<ContextMenuRootProps>();\n const emit = defineEmits<ContextMenuRootEmits>();\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
575
575
  },
576
576
  {
577
577
  fileName: "ContextMenu/Group.vue",
578
578
  dirPath: "components/UI",
579
579
  fileContent:
580
- '<template>\n <ContextMenuGroup v-bind="props">\n <slot/>\n </ContextMenuGroup>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuGroup } from "radix-vue";\n import type { ContextMenuGroupProps } from "radix-vue";\n\n const props = defineProps<ContextMenuGroupProps>();\n</script>\n',
580
+ '<template>\n <ContextMenuGroup v-bind="props">\n <slot />\n </ContextMenuGroup>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuGroup } from "radix-vue";\n import type { ContextMenuGroupProps } from "radix-vue";\n\n const props = defineProps<ContextMenuGroupProps>();\n</script>\n',
581
581
  },
582
582
  {
583
583
  fileName: "ContextMenu/Item.vue",
@@ -601,13 +601,13 @@ export default [
601
601
  fileName: "ContextMenu/Portal.vue",
602
602
  dirPath: "components/UI",
603
603
  fileContent:
604
- '<template>\n <ContextMenuPortal v-bind="props">\n <slot/>\n </ContextMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuPortal } from "radix-vue";\n import type { ContextMenuPortalProps } from "radix-vue";\n\n const props = defineProps<ContextMenuPortalProps>();\n</script>\n',
604
+ '<template>\n <ContextMenuPortal v-bind="props">\n <slot />\n </ContextMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuPortal } from "radix-vue";\n import type { ContextMenuPortalProps } from "radix-vue";\n\n const props = defineProps<ContextMenuPortalProps>();\n</script>\n',
605
605
  },
606
606
  {
607
607
  fileName: "ContextMenu/RadioGroup.vue",
608
608
  dirPath: "components/UI",
609
609
  fileContent:
610
- '<template>\n <ContextMenuRadioGroup v-bind="forwarded">\n <slot/>\n </ContextMenuRadioGroup>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuRadioGroup, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from "radix-vue";\n\n const props = defineProps<ContextMenuRadioGroupProps>();\n\n const emits = defineEmits<ContextMenuRadioGroupEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
610
+ '<template>\n <ContextMenuRadioGroup v-bind="forwarded">\n <slot />\n </ContextMenuRadioGroup>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuRadioGroup, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from "radix-vue";\n\n const props = defineProps<ContextMenuRadioGroupProps>();\n\n const emits = defineEmits<ContextMenuRadioGroupEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
611
611
  },
612
612
  {
613
613
  fileName: "ContextMenu/RadioItem.vue",
@@ -631,13 +631,13 @@ export default [
631
631
  fileName: "ContextMenu/Sub.vue",
632
632
  dirPath: "components/UI",
633
633
  fileContent:
634
- '<template>\n <ContextMenuSub v-bind="forwarded">\n <slot/>\n </ContextMenuSub>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSub, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuSubEmits, ContextMenuSubProps } from "radix-vue";\n\n const props = defineProps<ContextMenuSubProps>();\n const emits = defineEmits<ContextMenuSubEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
634
+ '<template>\n <ContextMenuSub v-bind="forwarded">\n <slot />\n </ContextMenuSub>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSub, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuSubEmits, ContextMenuSubProps } from "radix-vue";\n\n const props = defineProps<ContextMenuSubProps>();\n const emits = defineEmits<ContextMenuSubEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
635
635
  },
636
636
  {
637
637
  fileName: "ContextMenu/SubContent.vue",
638
638
  dirPath: "components/UI",
639
639
  fileContent:
640
- '<template>\n <UiContextMenuPortal>\n <ContextMenuSubContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot/>\n </ContextMenuSubContent>\n </UiContextMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSubContent, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuSubContentEmits, ContextMenuSubContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n ContextMenuSubContentProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n loop: true,\n avoidCollisions: true,\n collisionPadding: 8,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<ContextMenuSubContentEmits>();\n\n const styles = tv({\n base: "z-50 min-w-[100px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
640
+ '<template>\n <UiContextMenuPortal>\n <ContextMenuSubContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot />\n </ContextMenuSubContent>\n </UiContextMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSubContent, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuSubContentEmits, ContextMenuSubContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n ContextMenuSubContentProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n loop: true,\n avoidCollisions: true,\n collisionPadding: 8,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<ContextMenuSubContentEmits>();\n\n const styles = tv({\n base: "z-50 min-w-[100px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
641
641
  },
642
642
  {
643
643
  fileName: "ContextMenu/SubTrigger.vue",
@@ -649,7 +649,7 @@ export default [
649
649
  fileName: "ContextMenu/Trigger.vue",
650
650
  dirPath: "components/UI",
651
651
  fileContent:
652
- '<template>\n <ContextMenuTrigger v-bind="props">\n <slot/>\n </ContextMenuTrigger>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuTrigger } from "radix-vue";\n import type { ContextMenuTriggerProps } from "radix-vue";\n\n const props = defineProps<ContextMenuTriggerProps>();\n</script>\n',
652
+ '<template>\n <ContextMenuTrigger v-bind="props">\n <slot />\n </ContextMenuTrigger>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuTrigger } from "radix-vue";\n import type { ContextMenuTriggerProps } from "radix-vue";\n\n const props = defineProps<ContextMenuTriggerProps>();\n</script>\n',
653
653
  },
654
654
  ],
655
655
  utils: [],
@@ -665,7 +665,7 @@ export default [
665
665
  fileName: "CurrencyInput.vue",
666
666
  dirPath: "components/UI",
667
667
  fileContent:
668
- '<template>\r\n <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" >\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { defu } from "defu";\r\n import { useCurrencyInput } from "vue-currency-input";\r\n import type { CurrencyInputOptions } from "vue-currency-input";\r\n\r\n const props = defineProps<{\r\n class?: any;\r\n id?: string;\r\n name?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n required?: boolean;\r\n modelValue?: any;\r\n options?: CurrencyInputOptions;\r\n }>();\r\n\r\n const { inputRef } = useCurrencyInput(\r\n defu({}, props.options, {\r\n currency: "USD",\r\n locale: "en-US",\r\n hideCurrencySymbolOnFocus: false,\r\n hideGroupingSeparatorOnFocus: false,\r\n })\r\n );\r\n\r\n const styles = tv({\r\n base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\r\n });\r\n</script>\r\n',
668
+ '<template>\n <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" >\n</template>\n\n<script lang="ts" setup>\n import { defu } from "defu";\n import { useCurrencyInput } from "vue-currency-input";\n import type { CurrencyInputOptions } from "vue-currency-input";\n\n const props = defineProps<{\n class?: any;\n id?: string;\n name?: string;\n placeholder?: string;\n disabled?: boolean;\n required?: boolean;\n modelValue?: any;\n options?: CurrencyInputOptions;\n }>();\n\n const { inputRef } = useCurrencyInput(\n defu({}, props.options, {\n currency: "USD",\n locale: "en-US",\n hideCurrencySymbolOnFocus: false,\n hideGroupingSeparatorOnFocus: false,\n })\n );\n\n const styles = tv({\n base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n });\n</script>\n',
669
669
  },
670
670
  ],
671
671
  utils: [],
@@ -696,7 +696,7 @@ export default [
696
696
  fileName: "Datatable.client.vue",
697
697
  dirPath: "components/UI",
698
698
  fileContent:
699
- '<template>\r\n <DataTable\r\n ref="table"\r\n :columns="columns"\r\n :ajax="ajax"\r\n :data="data"\r\n :class="props.class"\r\n :options="options"\r\n >\r\n <template v-for="(_, name) in $slots" #[name]="scope">\r\n <slot :name="name" v-bind="scope"/>\r\n </template>\r\n </DataTable>\r\n</template>\r\n\r\n<script lang="ts" setup generic="T extends Record<string, any>">\r\n import type DataTableRef from "datatables.net";\r\n import type { Config } from "datatables.net";\r\n\r\n export type DataTablesNamedSlotProps<T> = {\r\n /** The data to show in the cell (from the `columns.data` configuration) */\r\n cellData: keyof T | null;\r\n /** The column index for the cell (0-based index) */\r\n colIndex: number;\r\n /** The data object for the whole row */\r\n rowData: T | Record<string, any>;\r\n /** Row index for the cell (data index, not the display index) */\r\n rowIndex: number;\r\n /** Orthogonal data type */\r\n type: string;\r\n };\r\n\r\n const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n data?: Config["data"];\r\n class?: any;\r\n columns?: Config["columns"];\r\n ajax?: Config["ajax"];\r\n options?: Config;\r\n }>(),\r\n {\r\n data: () => [],\r\n class: "nowrap hover order-column row-border stripe display",\r\n options: () => ({}),\r\n }\r\n );\r\n\r\n const emits = defineEmits<{\r\n ready: [any];\r\n }>();\r\n\r\n onMounted(() => {\r\n nextTick(() => {\r\n emits("ready", table.value?.dt);\r\n });\r\n });\r\n</script>\r\n\r\n<style>\r\n :root {\r\n --dt-row-selected: 262.1, 83.3%, 57.8%;\r\n --dt-row-selected-text: 210, 20%, 98%;\r\n --dt-row-selected-link: 262.1, 83.3%, 57.8%;\r\n --dt-row-stripe: 0, 0%, 100%;\r\n --dt-row-hover: 0, 0%, 100%;\r\n --dt-column-ordering: 0, 0%, 100%;\r\n --dt-border: 220, 13%, 91%;\r\n --dt-foreground: 224, 71.4%, 4.1%;\r\n }\r\n\r\n .dark {\r\n --dt-row-selected: 263.4, 70%, 50.4%;\r\n --dt-row-selected-text: 210, 20%, 98%;\r\n --dt-row-selected-link: 263.4, 70%, 50.4%;\r\n --dt-row-stripe: 224, 71.4%, 4.1%;\r\n --dt-row-hover: 224, 71.4%, 4.1%;\r\n --dt-column-ordering: 224, 71.4%, 4.1%;\r\n --dt-border: 215, 27.9%, 16.9%;\r\n --dt-foreground: 224, 71.4%, 4.1%;\r\n }\r\n\r\n table.dataTable td.dt-control {\r\n text-align: center;\r\n cursor: pointer;\r\n }\r\n table.dataTable td.dt-control:before {\r\n display: inline-block;\r\n color: hsla(var(--dt-foreground), 0.5);\r\n content: "►";\r\n }\r\n table.dataTable tr.dt-hasChild td.dt-control:before {\r\n content: "▼";\r\n }\r\n\r\n table.dataTable thead > tr > th.sorting,\r\n table.dataTable thead > tr > th.sorting_asc,\r\n table.dataTable thead > tr > th.sorting_desc,\r\n table.dataTable thead > tr > th.sorting_asc_disabled,\r\n table.dataTable thead > tr > th.sorting_desc_disabled,\r\n table.dataTable thead > tr > td.sorting,\r\n table.dataTable thead > tr > td.sorting_asc,\r\n table.dataTable thead > tr > td.sorting_desc,\r\n table.dataTable thead > tr > td.sorting_asc_disabled,\r\n table.dataTable thead > tr > td.sorting_desc_disabled,\r\n /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc,\r\n table.dataTable thead > tr > th.dt-orderable-desc,\r\n table.dataTable thead > tr > td.dt-orderable-asc,\r\n table.dataTable thead > tr > td.dt-orderable-desc {\r\n @apply relative cursor-pointer pr-7;\r\n }\r\n table.dataTable thead > tr > th.sorting:before,\r\n table.dataTable thead > tr > th.sorting:after,\r\n table.dataTable thead > tr > th.sorting_asc:before,\r\n table.dataTable thead > tr > th.sorting_asc:after,\r\n table.dataTable thead > tr > th.sorting_desc:before,\r\n table.dataTable thead > tr > th.sorting_desc:after,\r\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n table.dataTable thead > tr > th.sorting_asc_disabled:after,\r\n table.dataTable thead > tr > th.sorting_desc_disabled:before,\r\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n table.dataTable thead > tr > td.sorting:before,\r\n table.dataTable thead > tr > td.sorting:after,\r\n table.dataTable thead > tr > td.sorting_asc:before,\r\n table.dataTable thead > tr > td.sorting_asc:after,\r\n table.dataTable thead > tr > td.sorting_desc:before,\r\n table.dataTable thead > tr > td.sorting_desc:after,\r\n table.dataTable thead > tr > td.sorting_asc_disabled:before,\r\n table.dataTable thead > tr > td.sorting_asc_disabled:after,\r\n table.dataTable thead > tr > td.sorting_desc_disabled:before,\r\n table.dataTable thead > tr > td.sorting_desc_disabled:after,\r\n /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc:before,\r\n table.dataTable thead > tr > th.dt-orderable-asc:after,\r\n table.dataTable thead > tr > th.dt-orderable-desc:before,\r\n table.dataTable thead > tr > th.dt-orderable-desc:after,\r\n table.dataTable thead > tr > td.dt-orderable-asc:before,\r\n table.dataTable thead > tr > td.dt-orderable-asc:after,\r\n table.dataTable thead > tr > td.dt-orderable-desc:before,\r\n table.dataTable thead > tr > td.dt-orderable-desc:after {\r\n @apply absolute right-2.5 block text-xs leading-3 opacity-25;\r\n }\r\n table.dataTable thead > tr > th.sorting:before,\r\n table.dataTable thead > tr > th.sorting_asc:before,\r\n table.dataTable thead > tr > th.sorting_desc:before,\r\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n table.dataTable thead > tr > th.sorting_desc_disabled:before,\r\n table.dataTable thead > tr > td.sorting:before,\r\n table.dataTable thead > tr > td.sorting_asc:before,\r\n table.dataTable thead > tr > td.sorting_desc:before,\r\n table.dataTable thead > tr > td.sorting_asc_disabled:before,\r\n table.dataTable thead > tr > td.sorting_desc_disabled:before,\r\n /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc:before,\r\n table.dataTable thead > tr > th.dt-orderable-desc:before,\r\n table.dataTable thead > tr > td.dt-orderable-asc:before,\r\n table.dataTable thead > tr > td.dt-orderable-desc:before {\r\n @apply bottom-[43%] h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-up.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-up.svg?color=white\')];\r\n }\r\n table.dataTable thead > tr > th.sorting:after,\r\n table.dataTable thead > tr > th.sorting_asc:after,\r\n table.dataTable thead > tr > th.sorting_desc:after,\r\n table.dataTable thead > tr > th.sorting_asc_disabled:after,\r\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n table.dataTable thead > tr > td.sorting:after,\r\n table.dataTable thead > tr > td.sorting_asc:after,\r\n table.dataTable thead > tr > td.sorting_desc:after,\r\n table.dataTable thead > tr > td.sorting_asc_disabled:after,\r\n table.dataTable thead > tr > td.sorting_desc_disabled:after,\r\n /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc:after,\r\n table.dataTable thead > tr > th.dt-orderable-desc:after,\r\n table.dataTable thead > tr > td.dt-orderable-asc:after,\r\n table.dataTable thead > tr > td.dt-orderable-desc:after {\r\n @apply top-[43%] h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\r\n }\r\n table.dataTable thead > tr > th.sorting_asc:before,\r\n table.dataTable thead > tr > th.sorting_desc:after,\r\n table.dataTable thead > tr > td.sorting_asc:before,\r\n table.dataTable thead > tr > td.sorting_desc:after,\r\n /* V2 */\r\n table.dataTable thead > tr > th.dt-ordering-asc:before,\r\n table.dataTable thead > tr > th.dt-ordering-desc:after {\r\n @apply opacity-80;\r\n }\r\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n table.dataTable thead > tr > td.sorting_desc_disabled:after,\r\n table.dataTable thead > tr > td.sorting_asc_disabled:before {\r\n @apply hidden;\r\n }\r\n table.dataTable thead > tr > th:active,\r\n table.dataTable thead > tr > td:active {\r\n @apply outline-none;\r\n }\r\n\r\n div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,\r\n div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,\r\n div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,\r\n div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {\r\n @apply hidden;\r\n }\r\n\r\n div.dataTables_processing {\r\n @apply absolute left-[50%] top-[50%] ml-[-100px] mt-[-26px] w-[200px] p-0.5 text-center;\r\n }\r\n div.dataTables_processing > div:last-child {\r\n @apply relative mx-auto my-4 h-4 w-20;\r\n }\r\n div.dataTables_processing > div:last-child > div {\r\n @apply absolute top-0 h-3.5 w-3.5 rounded-full;\r\n background: hsl(var(--dt-row-selected));\r\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\r\n }\r\n div.dataTables_processing > div:last-child > div:nth-child(1) {\r\n left: 8px;\r\n animation: datatables-loader-1 0.6s infinite;\r\n }\r\n div.dataTables_processing > div:last-child > div:nth-child(2) {\r\n left: 8px;\r\n animation: datatables-loader-2 0.6s infinite;\r\n }\r\n div.dataTables_processing > div:last-child > div:nth-child(3) {\r\n left: 32px;\r\n animation: datatables-loader-2 0.6s infinite;\r\n }\r\n div.dataTables_processing > div:last-child > div:nth-child(4) {\r\n left: 56px;\r\n animation: datatables-loader-3 0.6s infinite;\r\n }\r\n\r\n @keyframes datatables-loader-1 {\r\n 0% {\r\n transform: scale(0);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n }\r\n @keyframes datatables-loader-3 {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 100% {\r\n transform: scale(0);\r\n }\r\n }\r\n @keyframes datatables-loader-2 {\r\n 0% {\r\n transform: translate(0, 0);\r\n }\r\n 100% {\r\n transform: translate(24px, 0);\r\n }\r\n }\r\n table.dataTable.nowrap th,\r\n table.dataTable.nowrap td {\r\n white-space: nowrap;\r\n }\r\n table.dataTable th.dt-left,\r\n table.dataTable td.dt-left {\r\n text-align: left;\r\n }\r\n table.dataTable th.dt-center,\r\n table.dataTable td.dt-center,\r\n table.dataTable td.dataTables_empty {\r\n text-align: center;\r\n }\r\n table.dataTable th.dt-right,\r\n table.dataTable td.dt-right {\r\n text-align: right;\r\n }\r\n table.dataTable th.dt-justify,\r\n table.dataTable td.dt-justify {\r\n text-align: justify;\r\n }\r\n table.dataTable th.dt-nowrap,\r\n table.dataTable td.dt-nowrap {\r\n white-space: nowrap;\r\n }\r\n table.dataTable thead th,\r\n table.dataTable thead td,\r\n table.dataTable tfoot th,\r\n table.dataTable tfoot td {\r\n text-align: left;\r\n }\r\n table.dataTable thead th.dt-head-left,\r\n table.dataTable thead td.dt-head-left,\r\n table.dataTable tfoot th.dt-head-left,\r\n table.dataTable tfoot td.dt-head-left {\r\n text-align: left;\r\n }\r\n table.dataTable thead th.dt-head-center,\r\n table.dataTable thead td.dt-head-center,\r\n table.dataTable tfoot th.dt-head-center,\r\n table.dataTable tfoot td.dt-head-center {\r\n text-align: center;\r\n }\r\n table.dataTable thead th.dt-head-right,\r\n table.dataTable thead td.dt-head-right,\r\n table.dataTable tfoot th.dt-head-right,\r\n table.dataTable tfoot td.dt-head-right {\r\n text-align: right;\r\n }\r\n table.dataTable thead th.dt-head-justify,\r\n table.dataTable thead td.dt-head-justify,\r\n table.dataTable tfoot th.dt-head-justify,\r\n table.dataTable tfoot td.dt-head-justify {\r\n text-align: justify;\r\n }\r\n table.dataTable thead th.dt-head-nowrap,\r\n table.dataTable thead td.dt-head-nowrap,\r\n table.dataTable tfoot th.dt-head-nowrap,\r\n table.dataTable tfoot td.dt-head-nowrap {\r\n white-space: nowrap;\r\n }\r\n table.dataTable tbody th.dt-body-left,\r\n table.dataTable tbody td.dt-body-left {\r\n text-align: left;\r\n }\r\n table.dataTable tbody th.dt-body-center,\r\n table.dataTable tbody td.dt-body-center {\r\n text-align: center;\r\n }\r\n table.dataTable tbody th.dt-body-right,\r\n table.dataTable tbody td.dt-body-right {\r\n text-align: right;\r\n }\r\n table.dataTable tbody th.dt-body-justify,\r\n table.dataTable tbody td.dt-body-justify {\r\n text-align: justify;\r\n }\r\n table.dataTable tbody th.dt-body-nowrap,\r\n table.dataTable tbody td.dt-body-nowrap {\r\n white-space: nowrap;\r\n }\r\n\r\n /* Table Styles */\r\n\r\n table.dataTable {\r\n @apply w-full table-auto border-collapse;\r\n }\r\n\r\n /* Table header styles */\r\n table.dataTable thead th,\r\n table.dataTable tfoot th {\r\n @apply text-left text-sm font-medium text-muted-foreground;\r\n }\r\n\r\n table.dataTable > thead > tr > th {\r\n @apply border-b border-t-0 px-6 py-3;\r\n }\r\n table.dataTable > thead > tr > td {\r\n @apply border-b px-6 py-3 text-sm;\r\n }\r\n table.dataTable > thead > tr > th:active,\r\n table.dataTable > thead > tr > td:active {\r\n @apply outline-none;\r\n }\r\n table.dataTable > tfoot > tr > th,\r\n table.dataTable > tfoot > tr > td {\r\n @apply border-t px-6 py-3;\r\n }\r\n table.dataTable tbody tr {\r\n @apply bg-transparent;\r\n }\r\n table.dataTable tbody tr.selected > * {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable tbody tr.selected a {\r\n @apply text-primary;\r\n }\r\n table.dataTable tbody th,\r\n table.dataTable tbody td {\r\n @apply px-6 py-3 text-sm;\r\n }\r\n table.dataTable.row-border > tbody > tr > th,\r\n table.dataTable.row-border > tbody > tr > td,\r\n table.dataTable.display > tbody > tr > th,\r\n table.dataTable.display > tbody > tr > td {\r\n @apply border-t;\r\n }\r\n table.dataTable.row-border > tbody > tr:first-child > th,\r\n table.dataTable.row-border > tbody > tr:first-child > td,\r\n table.dataTable.display > tbody > tr:first-child > th,\r\n table.dataTable.display > tbody > tr:first-child > td {\r\n @apply border-t-0;\r\n }\r\n table.dataTable.row-border > tbody > tr.selected + tr.selected > td,\r\n table.dataTable.display > tbody > tr.selected + tr.selected > td {\r\n @apply border-t-primary/30;\r\n }\r\n table.dataTable.cell-border > tbody > tr > th,\r\n table.dataTable.cell-border > tbody > tr > td {\r\n @apply border-r border-t;\r\n }\r\n table.dataTable.cell-border > tbody > tr > th:first-child,\r\n table.dataTable.cell-border > tbody > tr > td:first-child {\r\n @apply border-l;\r\n }\r\n table.dataTable.cell-border > tbody > tr:first-child > th,\r\n table.dataTable.cell-border > tbody > tr:first-child > td {\r\n @apply border-t-0;\r\n }\r\n table.dataTable.stripe > tbody > tr.odd > *,\r\n table.dataTable.display > tbody > tr.odd > * {\r\n @apply bg-muted/50;\r\n }\r\n table.dataTable.stripe > tbody > tr.odd.selected > *,\r\n table.dataTable.display > tbody > tr.odd.selected > * {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.hover > tbody > tr:hover > *,\r\n table.dataTable.display > tbody > tr:hover > * {\r\n @apply bg-muted;\r\n }\r\n table.dataTable.hover > tbody > tr.selected:hover > *,\r\n table.dataTable.display > tbody > tr.selected:hover > * {\r\n @apply !bg-primary/10;\r\n }\r\n table.dataTable.order-column > tbody tr > .sorting_1,\r\n table.dataTable.order-column > tbody tr > .sorting_2,\r\n table.dataTable.order-column > tbody tr > .sorting_3,\r\n table.dataTable.display > tbody tr > .sorting_1,\r\n table.dataTable.display > tbody tr > .sorting_2,\r\n table.dataTable.display > tbody tr > .sorting_3 {\r\n @apply bg-muted;\r\n }\r\n table.dataTable.order-column > tbody tr.selected > .sorting_1,\r\n table.dataTable.order-column > tbody tr.selected > .sorting_2,\r\n table.dataTable.order-column > tbody tr.selected > .sorting_3,\r\n table.dataTable.display > tbody tr.selected > .sorting_1,\r\n table.dataTable.display > tbody tr.selected > .sorting_2,\r\n table.dataTable.display > tbody tr.selected > .sorting_3 {\r\n @apply !bg-primary/10;\r\n }\r\n table.dataTable.display > tbody > tr.odd > .sorting_1,\r\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {\r\n @apply bg-muted/50;\r\n }\r\n table.dataTable.display > tbody > tr.odd > .sorting_2,\r\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {\r\n @apply bg-muted/30;\r\n }\r\n table.dataTable.display > tbody > tr.odd > .sorting_3,\r\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {\r\n @apply bg-muted/10;\r\n }\r\n table.dataTable.display > tbody > tr.odd.selected > .sorting_1,\r\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {\r\n @apply bg-muted/50;\r\n }\r\n table.dataTable.display > tbody > tr.odd.selected > .sorting_2,\r\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {\r\n @apply bg-muted/30;\r\n }\r\n table.dataTable.display > tbody > tr.odd.selected > .sorting_3,\r\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {\r\n @apply bg-muted/10;\r\n }\r\n table.dataTable.display > tbody > tr.even > .sorting_1,\r\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {\r\n @apply bg-muted/50;\r\n }\r\n table.dataTable.display > tbody > tr.even > .sorting_2,\r\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {\r\n @apply bg-muted/30;\r\n }\r\n table.dataTable.display > tbody > tr.even > .sorting_3,\r\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {\r\n @apply bg-muted/10;\r\n }\r\n table.dataTable.display > tbody > tr.even.selected > .sorting_1,\r\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.display > tbody > tr.even.selected > .sorting_2,\r\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.display > tbody > tr.even.selected > .sorting_3,\r\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.display tbody tr:hover > .sorting_1,\r\n table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {\r\n @apply bg-muted;\r\n }\r\n table.dataTable.display tbody tr:hover > .sorting_2,\r\n table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {\r\n @apply bg-muted;\r\n }\r\n table.dataTable.display tbody tr:hover > .sorting_3,\r\n table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {\r\n @apply bg-muted;\r\n }\r\n table.dataTable.display tbody tr:hover.selected > .sorting_1,\r\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.display tbody tr:hover.selected > .sorting_2,\r\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.display tbody tr:hover.selected > .sorting_3,\r\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.no-footer {\r\n @apply border-b-0;\r\n }\r\n table.dataTable.compact thead th,\r\n table.dataTable.compact thead td,\r\n table.dataTable.compact tfoot th,\r\n table.dataTable.compact tfoot td,\r\n table.dataTable.compact tbody th,\r\n table.dataTable.compact tbody td {\r\n @apply px-4 py-2;\r\n }\r\n\r\n table.dataTable th,\r\n table.dataTable td {\r\n @apply box-content border-y;\r\n }\r\n\r\n table.dataTable tr:last-child td {\r\n @apply !border-b-0;\r\n }\r\n\r\n /* Control feature layout */\r\n .dataTables_wrapper {\r\n @apply w-full overflow-x-auto;\r\n }\r\n\r\n /* Export button styles - v1 of datatables */\r\n .dataTables_wrapper .dt-buttons {\r\n @apply inline-flex flex-wrap items-center gap-2;\r\n button {\r\n @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\r\n }\r\n }\r\n /* V2 of datatables button styles. \r\n */\r\n .dt-buttons {\r\n @apply inline-flex flex-wrap items-center gap-2;\r\n button {\r\n @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\r\n }\r\n }\r\n\r\n /* Copy modal */\r\n .dt-button-info {\r\n @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;\r\n }\r\n\r\n /* Select box at bottom showing number of records being displayed - v1 of datatables */\r\n .dataTables_wrapper .dataTables_length {\r\n label {\r\n @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;\r\n select {\r\n @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;\r\n }\r\n }\r\n }\r\n /* Select box at the bottom showing how many items are being display - v2 */\r\n .dt-length {\r\n @apply inline-flex items-center gap-2;\r\n label {\r\n @apply text-sm font-normal text-muted-foreground;\r\n }\r\n select {\r\n @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;\r\n }\r\n }\r\n\r\n /* Search box at the top styles - v1 of datatables */\r\n .dataTables_wrapper .dataTables_filter {\r\n label {\r\n @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\r\n input {\r\n @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm;\r\n }\r\n }\r\n }\r\n\r\n /* Search box at the top styles -v2 */\r\n .dt-search {\r\n @apply flex items-center gap-3;\r\n label {\r\n @apply inline-flex cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\r\n }\r\n input {\r\n @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm md:w-[50%] lg:w-[250px];\r\n }\r\n }\r\n\r\n /* Info text that shows `Showing X to XX of XXXX entries - v1 */\r\n .dataTables_wrapper .dataTables_info,\r\n .dt-info {\r\n @apply flex items-center gap-3 text-sm !text-muted-foreground;\r\n }\r\n\r\n /* Pagination button styles - v1 datatables */\r\n .dataTables_wrapper .dataTables_paginate {\r\n .paginate_button {\r\n @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\r\n }\r\n }\r\n /* Pagination button - v2 */\r\n .dt-paging-button {\r\n @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\r\n &.current,\r\n &:hover {\r\n @apply bg-muted;\r\n }\r\n &.disabled,\r\n &.disabled:hover,\r\n &.disabled:active {\r\n @apply pointer-events-none opacity-50;\r\n }\r\n }\r\n .dataTables_wrapper .dataTables_paginate .paginate_button.current,\r\n .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\r\n @apply bg-muted;\r\n }\r\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,\r\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,\r\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {\r\n @apply pointer-events-none opacity-50;\r\n }\r\n .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\r\n @apply bg-muted;\r\n }\r\n .dataTables_wrapper .dataTables_paginate .paginate_button:active {\r\n @apply bg-muted;\r\n }\r\n .dataTables_wrapper .dataTables_paginate .ellipsis,\r\n .dt-paging .ellipsis {\r\n @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;\r\n }\r\n .dataTables_wrapper .dataTables_scroll {\r\n clear: both;\r\n }\r\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,\r\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,\r\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,\r\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {\r\n vertical-align: middle;\r\n }\r\n .dataTables_wrapper\r\n .dataTables_scroll\r\n div.dataTables_scrollBody\r\n > table\r\n > thead\r\n > tr\r\n > th\r\n > div.dataTables_sizing,\r\n .dataTables_wrapper\r\n .dataTables_scroll\r\n div.dataTables_scrollBody\r\n > table\r\n > thead\r\n > tr\r\n > td\r\n > div.dataTables_sizing,\r\n .dataTables_wrapper\r\n .dataTables_scroll\r\n div.dataTables_scrollBody\r\n > table\r\n > tbody\r\n > tr\r\n > th\r\n > div.dataTables_sizing,\r\n .dataTables_wrapper\r\n .dataTables_scroll\r\n div.dataTables_scrollBody\r\n > table\r\n > tbody\r\n > tr\r\n > td\r\n > div.dataTables_sizing {\r\n height: 0;\r\n overflow: hidden;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n .dataTables_wrapper.no-footer .dataTables_scrollBody {\r\n @apply border-b;\r\n }\r\n .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,\r\n .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {\r\n border-bottom: none;\r\n }\r\n .dataTables_wrapper:after {\r\n visibility: hidden;\r\n display: block;\r\n content: "";\r\n clear: both;\r\n height: 0;\r\n }\r\n\r\n /* \r\n responsive styles\r\n */\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {\r\n cursor: default !important;\r\n }\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {\r\n display: none !important;\r\n }\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {\r\n cursor: pointer;\r\n }\r\n\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {\r\n @apply mr-2 inline-flex h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg\')] bg-contain bg-center bg-no-repeat pb-[3px] content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg?color=white\')];\r\n }\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {\r\n content: "◄";\r\n }\r\n table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {\r\n @apply mr-2 inline-block h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\r\n }\r\n table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,\r\n table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {\r\n padding-left: 0.333em;\r\n }\r\n table.dataTable.dtr-column > tbody > tr > td.dtr-control,\r\n table.dataTable.dtr-column > tbody > tr > th.dtr-control,\r\n table.dataTable.dtr-column > tbody > tr > td.control,\r\n table.dataTable.dtr-column > tbody > tr > th.control {\r\n cursor: pointer;\r\n }\r\n table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr > td.control:before,\r\n table.dataTable.dtr-column > tbody > tr > th.control:before {\r\n @apply mr-2 inline-flex h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg\')] bg-contain bg-center bg-no-repeat pb-[3px] content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg?color=white\')];\r\n }\r\n table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,\r\n table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,\r\n table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,\r\n table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {\r\n content: "◄";\r\n }\r\n table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr.parent td.control:before,\r\n table.dataTable.dtr-column > tbody > tr.parent th.control:before,\r\n table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,\r\n table.dataTable.dtr-column > tbody > tr.dtr-expanded th.control:before {\r\n @apply mr-2 inline-block h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\r\n }\r\n\r\n table.dataTable > tbody td.child {\r\n @apply p-0;\r\n }\r\n table.dataTable > tbody > tr.child:hover,\r\n table.dataTable > tbody > tr.child:hover > td.child {\r\n background: transparent !important;\r\n }\r\n table.dataTable > tbody > tr.child ul.dtr-details {\r\n @apply m-0 block w-full list-none p-0;\r\n }\r\n table.dataTable > tbody > tr.child ul.dtr-details > li {\r\n @apply border-b p-3 px-7 hover:bg-muted;\r\n }\r\n\r\n table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {\r\n @apply border-b-0;\r\n }\r\n table.dataTable > tbody > tr.child span.dtr-title {\r\n @apply inline-block min-w-[80px] font-bold;\r\n }\r\n /* Responsive modal */\r\n div.dtr-modal {\r\n @apply fixed left-0 top-0 z-[1000] box-border size-full;\r\n }\r\n div.dtr-modal div.dtr-modal-display {\r\n @apply absolute left-1/2 top-1/2 z-[102] max-h-[80%] w-full max-w-screen-sm -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-md border bg-background p-4 pb-0 md:px-7 md:py-4 md:pb-0 lg:max-h-[90%];\r\n }\r\n div.dtr-modal div.dtr-modal-content {\r\n @apply relative flex flex-col p-0 text-[15px];\r\n h2 {\r\n @apply text-lg font-semibold text-foreground;\r\n }\r\n table tr td {\r\n @apply space-x-10 pb-2 first:font-semibold [&:nth-child(2)]:pl-2;\r\n }\r\n }\r\n div.dtr-modal div.dtr-modal-close {\r\n @apply absolute right-2 top-2 z-[10] inline-flex size-6 cursor-pointer items-center justify-center rounded-md bg-muted/10 hover:bg-muted;\r\n }\r\n div.dtr-modal div.dtr-modal-background {\r\n @apply fixed inset-0 z-[101] bg-background/20 backdrop-blur;\r\n }\r\n\r\n /* Search Builder Styles */\r\n div.dt-button-collection {\r\n overflow: visible !important;\r\n z-index: 2002 !important;\r\n }\r\n div.dt-button-collection div.dtsb-searchBuilder {\r\n padding-left: 1em !important;\r\n padding-right: 1em !important;\r\n }\r\n div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {\r\n padding-right: 40px;\r\n }\r\n .dtsb-greyscale {\r\n @apply !border;\r\n }\r\n div.dtsb-logicContainer .dtsb-greyscale {\r\n border: none !important;\r\n }\r\n div.dtsb-searchBuilder {\r\n @apply mb-4 cursor-default justify-evenly text-left;\r\n }\r\n div.dtsb-searchBuilder button.dtsb-button,\r\n div.dtsb-searchBuilder select {\r\n @apply text-sm;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-titleRow {\r\n @apply mb-3 flex items-center justify-between;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {\r\n @apply inline-block text-sm font-normal;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {\r\n display: inline;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,\r\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,\r\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {\r\n display: block;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group {\r\n @apply relative clear-both mb-4;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {\r\n float: right;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {\r\n margin: 2px;\r\n text-align: center;\r\n padding: 0;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r\n -webkit-transform: rotate(90deg);\r\n -moz-transform: rotate(90deg);\r\n -o-transform: rotate(90deg);\r\n -ms-transform: rotate(90deg);\r\n transform: rotate(90deg);\r\n position: absolute;\r\n margin-top: 0.8em;\r\n margin-right: 0.8em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r\n margin-bottom: 0.8em;\r\n display: flex;\r\n justify-content: flex-start;\r\n flex-flow: row wrap;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n padding: 0.4em;\r\n margin-right: 0.8em;\r\n min-width: 5em;\r\n max-width: 20em;\r\n color: inherit;\r\n }\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n select.dtsb-dropDown\r\n option.dtsb-notItalic,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {\r\n font-style: normal;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {\r\n font-style: italic;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r\n flex: 1;\r\n white-space: nowrap;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {\r\n margin-right: 0.8em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {\r\n width: 33%;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {\r\n height: 100%;\r\n box-sizing: border-box;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r\n margin-left: auto;\r\n display: inline-block;\r\n }\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-delete,\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-right,\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-left {\r\n margin-right: 0.8em;\r\n }\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-delete:last-child,\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-right:last-child,\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-left:last-child {\r\n margin-right: 0;\r\n }\r\n @media screen and (max-width: 550px) {\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r\n display: flex;\r\n flex-flow: none;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n padding-right: calc(35px + 0.8em);\r\n margin-bottom: 0px;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {\r\n padding-top: 0.8em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {\r\n padding-top: 0em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n max-width: none;\r\n width: 100%;\r\n margin-bottom: 0.8em;\r\n margin-right: 0.8em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r\n margin-right: 0.8em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r\n position: absolute;\r\n width: 35px;\r\n display: flex;\r\n flex-wrap: wrap-reverse;\r\n right: 0;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {\r\n margin-right: 0px !important;\r\n }\r\n }\r\n div.dtsb-searchBuilder button,\r\n div.dtsb-searchBuilder select.dtsb-dropDown,\r\n div.dtsb-searchBuilder input {\r\n @apply bg-background;\r\n }\r\n div.dtsb-searchBuilder button.dtsb-button {\r\n @apply relative box-border inline-flex h-9 cursor-pointer select-none items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md border bg-background px-3 py-2 text-sm font-normal text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\r\n }\r\n div.dtsb-searchBuilder button.dtsb-button:hover {\r\n @apply cursor-pointer bg-muted;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-logicContainer {\r\n @apply overflow-hidden rounded-none border;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-logicContainer button {\r\n @apply rounded-md border-transparent bg-transparent;\r\n }\r\n div.dtsb-searchBuilder button.dtsb-clearGroup {\r\n min-width: 2em;\r\n padding: 0;\r\n }\r\n div.dtsb-searchBuilder button.dtsb-iptbtn {\r\n min-width: 100px;\r\n text-align: left;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r\n @apply flex flex-row content-start items-start justify-start rounded-md;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {\r\n @apply m-0 shrink-0 grow rounded-none border-0;\r\n flex-basis: 3em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {\r\n border: none;\r\n border-radius: 0px;\r\n width: 2em;\r\n margin: 0px;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n @apply rounded-md border;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {\r\n @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;\r\n }\r\n\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {\r\n @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;\r\n }\r\n\r\n /* Col vis styles */\r\n .dt-button-background {\r\n @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur-sm;\r\n }\r\n .dt-button-down-arrow {\r\n @apply text-[10px];\r\n }\r\n .dt-button-collection {\r\n @apply relative;\r\n [role="menu"] {\r\n @apply absolute -left-20 top-7 flex min-w-[200px] flex-col rounded-md border bg-background py-2 shadow before:mx-2 before:mb-2 before:text-xs before:text-muted-foreground/70 before:content-[\'Select_columns\'];\r\n button {\r\n @apply h-8 rounded-none border-none px-4 text-xs;\r\n }\r\n .dt-button.buttons-columnVisibility.dt-button-active {\r\n @apply text-foreground after:ml-auto after:content-[\'✓\'];\r\n }\r\n }\r\n }\r\n</style>\r\n',
699
+ '<template>\n <DataTable\n ref="table"\n :columns="columns"\n :ajax="ajax"\n :data="data"\n :class="props.class"\n :options="options"\n >\n <template v-for="(_, name) in $slots" #[name]="scope">\n <slot :name="name" v-bind="scope" />\n </template>\n </DataTable>\n</template>\n\n<script lang="ts" setup generic="T extends Record<string, any>">\n import type DataTableRef from "datatables.net";\n import type { Config } from "datatables.net";\n\n export type DataTablesNamedSlotProps<T> = {\n /** The data to show in the cell (from the `columns.data` configuration) */\n cellData: keyof T | null;\n /** The column index for the cell (0-based index) */\n colIndex: number;\n /** The data object for the whole row */\n rowData: T | Record<string, any>;\n /** Row index for the cell (data index, not the display index) */\n rowIndex: number;\n /** Orthogonal data type */\n type: string;\n };\n\n const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);\n\n const props = withDefaults(\n defineProps<{\n data?: Config["data"];\n class?: any;\n columns?: Config["columns"];\n ajax?: Config["ajax"];\n options?: Config;\n }>(),\n {\n data: () => [],\n class: "nowrap hover order-column row-border stripe display",\n options: () => ({}),\n }\n );\n\n const emits = defineEmits<{\n ready: [any];\n }>();\n\n onMounted(() => {\n nextTick(() => {\n emits("ready", table.value?.dt);\n });\n });\n</script>\n\n<style>\n :root {\n --dt-row-selected: 262.1, 83.3%, 57.8%;\n --dt-row-selected-text: 210, 20%, 98%;\n --dt-row-selected-link: 262.1, 83.3%, 57.8%;\n --dt-row-stripe: 0, 0%, 100%;\n --dt-row-hover: 0, 0%, 100%;\n --dt-column-ordering: 0, 0%, 100%;\n --dt-border: 220, 13%, 91%;\n --dt-foreground: 224, 71.4%, 4.1%;\n }\n\n .dark {\n --dt-row-selected: 263.4, 70%, 50.4%;\n --dt-row-selected-text: 210, 20%, 98%;\n --dt-row-selected-link: 263.4, 70%, 50.4%;\n --dt-row-stripe: 224, 71.4%, 4.1%;\n --dt-row-hover: 224, 71.4%, 4.1%;\n --dt-column-ordering: 224, 71.4%, 4.1%;\n --dt-border: 215, 27.9%, 16.9%;\n --dt-foreground: 224, 71.4%, 4.1%;\n }\n\n table.dataTable td.dt-control {\n text-align: center;\n cursor: pointer;\n }\n table.dataTable td.dt-control:before {\n display: inline-block;\n color: hsla(var(--dt-foreground), 0.5);\n content: "►";\n }\n table.dataTable tr.dt-hasChild td.dt-control:before {\n content: "▼";\n }\n\n table.dataTable thead > tr > th.sorting,\n table.dataTable thead > tr > th.sorting_asc,\n table.dataTable thead > tr > th.sorting_desc,\n table.dataTable thead > tr > th.sorting_asc_disabled,\n table.dataTable thead > tr > th.sorting_desc_disabled,\n table.dataTable thead > tr > td.sorting,\n table.dataTable thead > tr > td.sorting_asc,\n table.dataTable thead > tr > td.sorting_desc,\n table.dataTable thead > tr > td.sorting_asc_disabled,\n table.dataTable thead > tr > td.sorting_desc_disabled,\n /* V2 */\n table.dataTable thead > tr > th.dt-orderable-asc,\n table.dataTable thead > tr > th.dt-orderable-desc,\n table.dataTable thead > tr > td.dt-orderable-asc,\n table.dataTable thead > tr > td.dt-orderable-desc {\n @apply relative cursor-pointer pr-7;\n }\n table.dataTable thead > tr > th.sorting:before,\n table.dataTable thead > tr > th.sorting:after,\n table.dataTable thead > tr > th.sorting_asc:before,\n table.dataTable thead > tr > th.sorting_asc:after,\n table.dataTable thead > tr > th.sorting_desc:before,\n table.dataTable thead > tr > th.sorting_desc:after,\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\n table.dataTable thead > tr > th.sorting_asc_disabled:after,\n table.dataTable thead > tr > th.sorting_desc_disabled:before,\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\n table.dataTable thead > tr > td.sorting:before,\n table.dataTable thead > tr > td.sorting:after,\n table.dataTable thead > tr > td.sorting_asc:before,\n table.dataTable thead > tr > td.sorting_asc:after,\n table.dataTable thead > tr > td.sorting_desc:before,\n table.dataTable thead > tr > td.sorting_desc:after,\n table.dataTable thead > tr > td.sorting_asc_disabled:before,\n table.dataTable thead > tr > td.sorting_asc_disabled:after,\n table.dataTable thead > tr > td.sorting_desc_disabled:before,\n table.dataTable thead > tr > td.sorting_desc_disabled:after,\n /* V2 */\n table.dataTable thead > tr > th.dt-orderable-asc:before,\n table.dataTable thead > tr > th.dt-orderable-asc:after,\n table.dataTable thead > tr > th.dt-orderable-desc:before,\n table.dataTable thead > tr > th.dt-orderable-desc:after,\n table.dataTable thead > tr > td.dt-orderable-asc:before,\n table.dataTable thead > tr > td.dt-orderable-asc:after,\n table.dataTable thead > tr > td.dt-orderable-desc:before,\n table.dataTable thead > tr > td.dt-orderable-desc:after {\n @apply absolute right-2.5 block text-xs leading-3 opacity-25;\n }\n table.dataTable thead > tr > th.sorting:before,\n table.dataTable thead > tr > th.sorting_asc:before,\n table.dataTable thead > tr > th.sorting_desc:before,\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\n table.dataTable thead > tr > th.sorting_desc_disabled:before,\n table.dataTable thead > tr > td.sorting:before,\n table.dataTable thead > tr > td.sorting_asc:before,\n table.dataTable thead > tr > td.sorting_desc:before,\n table.dataTable thead > tr > td.sorting_asc_disabled:before,\n table.dataTable thead > tr > td.sorting_desc_disabled:before,\n /* V2 */\n table.dataTable thead > tr > th.dt-orderable-asc:before,\n table.dataTable thead > tr > th.dt-orderable-desc:before,\n table.dataTable thead > tr > td.dt-orderable-asc:before,\n table.dataTable thead > tr > td.dt-orderable-desc:before {\n @apply bottom-[43%] h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-up.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-up.svg?color=white\')];\n }\n table.dataTable thead > tr > th.sorting:after,\n table.dataTable thead > tr > th.sorting_asc:after,\n table.dataTable thead > tr > th.sorting_desc:after,\n table.dataTable thead > tr > th.sorting_asc_disabled:after,\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\n table.dataTable thead > tr > td.sorting:after,\n table.dataTable thead > tr > td.sorting_asc:after,\n table.dataTable thead > tr > td.sorting_desc:after,\n table.dataTable thead > tr > td.sorting_asc_disabled:after,\n table.dataTable thead > tr > td.sorting_desc_disabled:after,\n /* V2 */\n table.dataTable thead > tr > th.dt-orderable-asc:after,\n table.dataTable thead > tr > th.dt-orderable-desc:after,\n table.dataTable thead > tr > td.dt-orderable-asc:after,\n table.dataTable thead > tr > td.dt-orderable-desc:after {\n @apply top-[43%] h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\n }\n table.dataTable thead > tr > th.sorting_asc:before,\n table.dataTable thead > tr > th.sorting_desc:after,\n table.dataTable thead > tr > td.sorting_asc:before,\n table.dataTable thead > tr > td.sorting_desc:after,\n /* V2 */\n table.dataTable thead > tr > th.dt-ordering-asc:before,\n table.dataTable thead > tr > th.dt-ordering-desc:after {\n @apply opacity-80;\n }\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\n table.dataTable thead > tr > td.sorting_desc_disabled:after,\n table.dataTable thead > tr > td.sorting_asc_disabled:before {\n @apply hidden;\n }\n table.dataTable thead > tr > th:active,\n table.dataTable thead > tr > td:active {\n @apply outline-none;\n }\n\n div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,\n div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,\n div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,\n div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {\n @apply hidden;\n }\n\n div.dataTables_processing {\n @apply absolute left-[50%] top-[50%] ml-[-100px] mt-[-26px] w-[200px] p-0.5 text-center;\n }\n div.dataTables_processing > div:last-child {\n @apply relative mx-auto my-4 h-4 w-20;\n }\n div.dataTables_processing > div:last-child > div {\n @apply absolute top-0 h-3.5 w-3.5 rounded-full;\n background: hsl(var(--dt-row-selected));\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n }\n div.dataTables_processing > div:last-child > div:nth-child(1) {\n left: 8px;\n animation: datatables-loader-1 0.6s infinite;\n }\n div.dataTables_processing > div:last-child > div:nth-child(2) {\n left: 8px;\n animation: datatables-loader-2 0.6s infinite;\n }\n div.dataTables_processing > div:last-child > div:nth-child(3) {\n left: 32px;\n animation: datatables-loader-2 0.6s infinite;\n }\n div.dataTables_processing > div:last-child > div:nth-child(4) {\n left: 56px;\n animation: datatables-loader-3 0.6s infinite;\n }\n\n @keyframes datatables-loader-1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes datatables-loader-3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n }\n @keyframes datatables-loader-2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(24px, 0);\n }\n }\n table.dataTable.nowrap th,\n table.dataTable.nowrap td {\n white-space: nowrap;\n }\n table.dataTable th.dt-left,\n table.dataTable td.dt-left {\n text-align: left;\n }\n table.dataTable th.dt-center,\n table.dataTable td.dt-center,\n table.dataTable td.dataTables_empty {\n text-align: center;\n }\n table.dataTable th.dt-right,\n table.dataTable td.dt-right {\n text-align: right;\n }\n table.dataTable th.dt-justify,\n table.dataTable td.dt-justify {\n text-align: justify;\n }\n table.dataTable th.dt-nowrap,\n table.dataTable td.dt-nowrap {\n white-space: nowrap;\n }\n table.dataTable thead th,\n table.dataTable thead td,\n table.dataTable tfoot th,\n table.dataTable tfoot td {\n text-align: left;\n }\n table.dataTable thead th.dt-head-left,\n table.dataTable thead td.dt-head-left,\n table.dataTable tfoot th.dt-head-left,\n table.dataTable tfoot td.dt-head-left {\n text-align: left;\n }\n table.dataTable thead th.dt-head-center,\n table.dataTable thead td.dt-head-center,\n table.dataTable tfoot th.dt-head-center,\n table.dataTable tfoot td.dt-head-center {\n text-align: center;\n }\n table.dataTable thead th.dt-head-right,\n table.dataTable thead td.dt-head-right,\n table.dataTable tfoot th.dt-head-right,\n table.dataTable tfoot td.dt-head-right {\n text-align: right;\n }\n table.dataTable thead th.dt-head-justify,\n table.dataTable thead td.dt-head-justify,\n table.dataTable tfoot th.dt-head-justify,\n table.dataTable tfoot td.dt-head-justify {\n text-align: justify;\n }\n table.dataTable thead th.dt-head-nowrap,\n table.dataTable thead td.dt-head-nowrap,\n table.dataTable tfoot th.dt-head-nowrap,\n table.dataTable tfoot td.dt-head-nowrap {\n white-space: nowrap;\n }\n table.dataTable tbody th.dt-body-left,\n table.dataTable tbody td.dt-body-left {\n text-align: left;\n }\n table.dataTable tbody th.dt-body-center,\n table.dataTable tbody td.dt-body-center {\n text-align: center;\n }\n table.dataTable tbody th.dt-body-right,\n table.dataTable tbody td.dt-body-right {\n text-align: right;\n }\n table.dataTable tbody th.dt-body-justify,\n table.dataTable tbody td.dt-body-justify {\n text-align: justify;\n }\n table.dataTable tbody th.dt-body-nowrap,\n table.dataTable tbody td.dt-body-nowrap {\n white-space: nowrap;\n }\n\n /* Table Styles */\n\n table.dataTable {\n @apply w-full table-auto border-collapse;\n }\n\n /* Table header styles */\n table.dataTable thead th,\n table.dataTable tfoot th {\n @apply text-left text-sm font-medium text-muted-foreground;\n }\n\n table.dataTable > thead > tr > th {\n @apply border-b border-t-0 px-6 py-3;\n }\n table.dataTable > thead > tr > td {\n @apply border-b px-6 py-3 text-sm;\n }\n table.dataTable > thead > tr > th:active,\n table.dataTable > thead > tr > td:active {\n @apply outline-none;\n }\n table.dataTable > tfoot > tr > th,\n table.dataTable > tfoot > tr > td {\n @apply border-t px-6 py-3;\n }\n table.dataTable tbody tr {\n @apply bg-transparent;\n }\n table.dataTable tbody tr.selected > * {\n @apply bg-primary/10;\n }\n table.dataTable tbody tr.selected a {\n @apply text-primary;\n }\n table.dataTable tbody th,\n table.dataTable tbody td {\n @apply px-6 py-3 text-sm;\n }\n table.dataTable.row-border > tbody > tr > th,\n table.dataTable.row-border > tbody > tr > td,\n table.dataTable.display > tbody > tr > th,\n table.dataTable.display > tbody > tr > td {\n @apply border-t;\n }\n table.dataTable.row-border > tbody > tr:first-child > th,\n table.dataTable.row-border > tbody > tr:first-child > td,\n table.dataTable.display > tbody > tr:first-child > th,\n table.dataTable.display > tbody > tr:first-child > td {\n @apply border-t-0;\n }\n table.dataTable.row-border > tbody > tr.selected + tr.selected > td,\n table.dataTable.display > tbody > tr.selected + tr.selected > td {\n @apply border-t-primary/30;\n }\n table.dataTable.cell-border > tbody > tr > th,\n table.dataTable.cell-border > tbody > tr > td {\n @apply border-r border-t;\n }\n table.dataTable.cell-border > tbody > tr > th:first-child,\n table.dataTable.cell-border > tbody > tr > td:first-child {\n @apply border-l;\n }\n table.dataTable.cell-border > tbody > tr:first-child > th,\n table.dataTable.cell-border > tbody > tr:first-child > td {\n @apply border-t-0;\n }\n table.dataTable.stripe > tbody > tr.odd > *,\n table.dataTable.display > tbody > tr.odd > * {\n @apply bg-muted/50;\n }\n table.dataTable.stripe > tbody > tr.odd.selected > *,\n table.dataTable.display > tbody > tr.odd.selected > * {\n @apply bg-primary/10;\n }\n table.dataTable.hover > tbody > tr:hover > *,\n table.dataTable.display > tbody > tr:hover > * {\n @apply bg-muted;\n }\n table.dataTable.hover > tbody > tr.selected:hover > *,\n table.dataTable.display > tbody > tr.selected:hover > * {\n @apply !bg-primary/10;\n }\n table.dataTable.order-column > tbody tr > .sorting_1,\n table.dataTable.order-column > tbody tr > .sorting_2,\n table.dataTable.order-column > tbody tr > .sorting_3,\n table.dataTable.display > tbody tr > .sorting_1,\n table.dataTable.display > tbody tr > .sorting_2,\n table.dataTable.display > tbody tr > .sorting_3 {\n @apply bg-muted;\n }\n table.dataTable.order-column > tbody tr.selected > .sorting_1,\n table.dataTable.order-column > tbody tr.selected > .sorting_2,\n table.dataTable.order-column > tbody tr.selected > .sorting_3,\n table.dataTable.display > tbody tr.selected > .sorting_1,\n table.dataTable.display > tbody tr.selected > .sorting_2,\n table.dataTable.display > tbody tr.selected > .sorting_3 {\n @apply !bg-primary/10;\n }\n table.dataTable.display > tbody > tr.odd > .sorting_1,\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {\n @apply bg-muted/50;\n }\n table.dataTable.display > tbody > tr.odd > .sorting_2,\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {\n @apply bg-muted/30;\n }\n table.dataTable.display > tbody > tr.odd > .sorting_3,\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {\n @apply bg-muted/10;\n }\n table.dataTable.display > tbody > tr.odd.selected > .sorting_1,\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {\n @apply bg-muted/50;\n }\n table.dataTable.display > tbody > tr.odd.selected > .sorting_2,\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {\n @apply bg-muted/30;\n }\n table.dataTable.display > tbody > tr.odd.selected > .sorting_3,\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {\n @apply bg-muted/10;\n }\n table.dataTable.display > tbody > tr.even > .sorting_1,\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {\n @apply bg-muted/50;\n }\n table.dataTable.display > tbody > tr.even > .sorting_2,\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {\n @apply bg-muted/30;\n }\n table.dataTable.display > tbody > tr.even > .sorting_3,\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {\n @apply bg-muted/10;\n }\n table.dataTable.display > tbody > tr.even.selected > .sorting_1,\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {\n @apply bg-primary/10;\n }\n table.dataTable.display > tbody > tr.even.selected > .sorting_2,\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {\n @apply bg-primary/10;\n }\n table.dataTable.display > tbody > tr.even.selected > .sorting_3,\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {\n @apply bg-primary/10;\n }\n table.dataTable.display tbody tr:hover > .sorting_1,\n table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {\n @apply bg-muted;\n }\n table.dataTable.display tbody tr:hover > .sorting_2,\n table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {\n @apply bg-muted;\n }\n table.dataTable.display tbody tr:hover > .sorting_3,\n table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {\n @apply bg-muted;\n }\n table.dataTable.display tbody tr:hover.selected > .sorting_1,\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {\n @apply bg-primary/10;\n }\n table.dataTable.display tbody tr:hover.selected > .sorting_2,\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {\n @apply bg-primary/10;\n }\n table.dataTable.display tbody tr:hover.selected > .sorting_3,\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {\n @apply bg-primary/10;\n }\n table.dataTable.no-footer {\n @apply border-b-0;\n }\n table.dataTable.compact thead th,\n table.dataTable.compact thead td,\n table.dataTable.compact tfoot th,\n table.dataTable.compact tfoot td,\n table.dataTable.compact tbody th,\n table.dataTable.compact tbody td {\n @apply px-4 py-2;\n }\n\n table.dataTable th,\n table.dataTable td {\n @apply box-content border-y;\n }\n\n table.dataTable tr:last-child td {\n @apply !border-b-0;\n }\n\n /* Control feature layout */\n .dataTables_wrapper {\n @apply w-full overflow-x-auto;\n }\n\n /* Export button styles - v1 of datatables */\n .dataTables_wrapper .dt-buttons {\n @apply inline-flex flex-wrap items-center gap-2;\n button {\n @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n }\n }\n /* V2 of datatables button styles. \n */\n .dt-buttons {\n @apply inline-flex flex-wrap items-center gap-2;\n button {\n @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n }\n }\n\n /* Copy modal */\n .dt-button-info {\n @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;\n }\n\n /* Select box at bottom showing number of records being displayed - v1 of datatables */\n .dataTables_wrapper .dataTables_length {\n label {\n @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;\n select {\n @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;\n }\n }\n }\n /* Select box at the bottom showing how many items are being display - v2 */\n .dt-length {\n @apply inline-flex items-center gap-2;\n label {\n @apply text-sm font-normal text-muted-foreground;\n }\n select {\n @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;\n }\n }\n\n /* Search box at the top styles - v1 of datatables */\n .dataTables_wrapper .dataTables_filter {\n label {\n @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\n input {\n @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm;\n }\n }\n }\n\n /* Search box at the top styles -v2 */\n .dt-search {\n @apply flex items-center gap-3;\n label {\n @apply inline-flex cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\n }\n input {\n @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm md:w-[50%] lg:w-[250px];\n }\n }\n\n /* Info text that shows `Showing X to XX of XXXX entries - v1 */\n .dataTables_wrapper .dataTables_info,\n .dt-info {\n @apply flex items-center gap-3 text-sm !text-muted-foreground;\n }\n\n /* Pagination button styles - v1 datatables */\n .dataTables_wrapper .dataTables_paginate {\n .paginate_button {\n @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n }\n }\n /* Pagination button - v2 */\n .dt-paging-button {\n @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n &.current,\n &:hover {\n @apply bg-muted;\n }\n &.disabled,\n &.disabled:hover,\n &.disabled:active {\n @apply pointer-events-none opacity-50;\n }\n }\n .dataTables_wrapper .dataTables_paginate .paginate_button.current,\n .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\n @apply bg-muted;\n }\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {\n @apply pointer-events-none opacity-50;\n }\n .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\n @apply bg-muted;\n }\n .dataTables_wrapper .dataTables_paginate .paginate_button:active {\n @apply bg-muted;\n }\n .dataTables_wrapper .dataTables_paginate .ellipsis,\n .dt-paging .ellipsis {\n @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;\n }\n .dataTables_wrapper .dataTables_scroll {\n clear: both;\n }\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {\n -webkit-overflow-scrolling: touch;\n }\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {\n vertical-align: middle;\n }\n .dataTables_wrapper\n .dataTables_scroll\n div.dataTables_scrollBody\n > table\n > thead\n > tr\n > th\n > div.dataTables_sizing,\n .dataTables_wrapper\n .dataTables_scroll\n div.dataTables_scrollBody\n > table\n > thead\n > tr\n > td\n > div.dataTables_sizing,\n .dataTables_wrapper\n .dataTables_scroll\n div.dataTables_scrollBody\n > table\n > tbody\n > tr\n > th\n > div.dataTables_sizing,\n .dataTables_wrapper\n .dataTables_scroll\n div.dataTables_scrollBody\n > table\n > tbody\n > tr\n > td\n > div.dataTables_sizing {\n height: 0;\n overflow: hidden;\n margin: 0 !important;\n padding: 0 !important;\n }\n .dataTables_wrapper.no-footer .dataTables_scrollBody {\n @apply border-b;\n }\n .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,\n .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {\n border-bottom: none;\n }\n .dataTables_wrapper:after {\n visibility: hidden;\n display: block;\n content: "";\n clear: both;\n height: 0;\n }\n\n /* \n responsive styles\n */\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {\n cursor: default !important;\n }\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {\n display: none !important;\n }\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {\n cursor: pointer;\n }\n\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {\n @apply mr-2 inline-flex h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg\')] bg-contain bg-center bg-no-repeat pb-[3px] content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg?color=white\')];\n }\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {\n content: "◄";\n }\n table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,\n table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,\n table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,\n table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {\n @apply mr-2 inline-block h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\n }\n table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,\n table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {\n padding-left: 0.333em;\n }\n table.dataTable.dtr-column > tbody > tr > td.dtr-control,\n table.dataTable.dtr-column > tbody > tr > th.dtr-control,\n table.dataTable.dtr-column > tbody > tr > td.control,\n table.dataTable.dtr-column > tbody > tr > th.control {\n cursor: pointer;\n }\n table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,\n table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,\n table.dataTable.dtr-column > tbody > tr > td.control:before,\n table.dataTable.dtr-column > tbody > tr > th.control:before {\n @apply mr-2 inline-flex h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg\')] bg-contain bg-center bg-no-repeat pb-[3px] content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-right.svg?color=white\')];\n }\n table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,\n table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,\n table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,\n table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {\n content: "◄";\n }\n table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,\n table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,\n table.dataTable.dtr-column > tbody > tr.parent td.control:before,\n table.dataTable.dtr-column > tbody > tr.parent th.control:before,\n table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,\n table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,\n table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,\n table.dataTable.dtr-column > tbody > tr.dtr-expanded th.control:before {\n @apply mr-2 inline-block h-4 w-4 bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg\')] bg-contain bg-center bg-no-repeat content-[\'\'] dark:bg-[url(\'https://api.iconify.design/lucide:chevron-down.svg?color=white\')];\n }\n\n table.dataTable > tbody td.child {\n @apply p-0;\n }\n table.dataTable > tbody > tr.child:hover,\n table.dataTable > tbody > tr.child:hover > td.child {\n background: transparent !important;\n }\n table.dataTable > tbody > tr.child ul.dtr-details {\n @apply m-0 block w-full list-none p-0;\n }\n table.dataTable > tbody > tr.child ul.dtr-details > li {\n @apply border-b p-3 px-7 hover:bg-muted;\n }\n\n table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {\n @apply border-b-0;\n }\n table.dataTable > tbody > tr.child span.dtr-title {\n @apply inline-block min-w-[80px] font-bold;\n }\n /* Responsive modal */\n div.dtr-modal {\n @apply fixed left-0 top-0 z-[1000] box-border size-full;\n }\n div.dtr-modal div.dtr-modal-display {\n @apply absolute left-1/2 top-1/2 z-[102] max-h-[80%] w-full max-w-screen-sm -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-md border bg-background p-4 pb-0 md:px-7 md:py-4 md:pb-0 lg:max-h-[90%];\n }\n div.dtr-modal div.dtr-modal-content {\n @apply relative flex flex-col p-0 text-[15px];\n h2 {\n @apply text-lg font-semibold text-foreground;\n }\n table tr td {\n @apply space-x-10 pb-2 first:font-semibold [&:nth-child(2)]:pl-2;\n }\n }\n div.dtr-modal div.dtr-modal-close {\n @apply absolute right-2 top-2 z-[10] inline-flex size-6 cursor-pointer items-center justify-center rounded-md bg-muted/10 hover:bg-muted;\n }\n div.dtr-modal div.dtr-modal-background {\n @apply fixed inset-0 z-[101] bg-background/20 backdrop-blur;\n }\n\n /* Search Builder Styles */\n div.dt-button-collection {\n overflow: visible !important;\n z-index: 2002 !important;\n }\n div.dt-button-collection div.dtsb-searchBuilder {\n padding-left: 1em !important;\n padding-right: 1em !important;\n }\n div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {\n padding-right: 40px;\n }\n .dtsb-greyscale {\n @apply !border;\n }\n div.dtsb-logicContainer .dtsb-greyscale {\n border: none !important;\n }\n div.dtsb-searchBuilder {\n @apply mb-4 cursor-default justify-evenly text-left;\n }\n div.dtsb-searchBuilder button.dtsb-button,\n div.dtsb-searchBuilder select {\n @apply text-sm;\n }\n div.dtsb-searchBuilder div.dtsb-titleRow {\n @apply mb-3 flex items-center justify-between;\n }\n div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {\n @apply inline-block text-sm font-normal;\n }\n div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {\n display: inline;\n }\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {\n display: block;\n }\n div.dtsb-searchBuilder div.dtsb-group {\n @apply relative clear-both mb-4;\n }\n div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {\n float: right;\n }\n div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {\n margin: 2px;\n text-align: center;\n padding: 0;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\n -webkit-transform: rotate(90deg);\n -moz-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n position: absolute;\n margin-top: 0.8em;\n margin-right: 0.8em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\n margin-bottom: 0.8em;\n display: flex;\n justify-content: flex-start;\n flex-flow: row wrap;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n padding: 0.4em;\n margin-right: 0.8em;\n min-width: 5em;\n max-width: 20em;\n color: inherit;\n }\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n select.dtsb-dropDown\n option.dtsb-notItalic,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {\n font-style: normal;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {\n font-style: italic;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\n flex: 1;\n white-space: nowrap;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {\n margin-right: 0.8em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {\n width: 33%;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {\n height: 100%;\n box-sizing: border-box;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\n margin-left: auto;\n display: inline-block;\n }\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-delete,\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-right,\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-left {\n margin-right: 0.8em;\n }\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-delete:last-child,\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-right:last-child,\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-left:last-child {\n margin-right: 0;\n }\n @media screen and (max-width: 550px) {\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\n display: flex;\n flex-flow: none;\n flex-direction: column;\n justify-content: flex-start;\n padding-right: calc(35px + 0.8em);\n margin-bottom: 0px;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {\n padding-top: 0.8em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {\n padding-top: 0em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n max-width: none;\n width: 100%;\n margin-bottom: 0.8em;\n margin-right: 0.8em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\n margin-right: 0.8em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\n position: absolute;\n width: 35px;\n display: flex;\n flex-wrap: wrap-reverse;\n right: 0;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {\n margin-right: 0px !important;\n }\n }\n div.dtsb-searchBuilder button,\n div.dtsb-searchBuilder select.dtsb-dropDown,\n div.dtsb-searchBuilder input {\n @apply bg-background;\n }\n div.dtsb-searchBuilder button.dtsb-button {\n @apply relative box-border inline-flex h-9 cursor-pointer select-none items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md border bg-background px-3 py-2 text-sm font-normal text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n }\n div.dtsb-searchBuilder button.dtsb-button:hover {\n @apply cursor-pointer bg-muted;\n }\n div.dtsb-searchBuilder div.dtsb-logicContainer {\n @apply overflow-hidden rounded-none border;\n }\n div.dtsb-searchBuilder div.dtsb-logicContainer button {\n @apply rounded-md border-transparent bg-transparent;\n }\n div.dtsb-searchBuilder button.dtsb-clearGroup {\n min-width: 2em;\n padding: 0;\n }\n div.dtsb-searchBuilder button.dtsb-iptbtn {\n min-width: 100px;\n text-align: left;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\n @apply flex flex-row content-start items-start justify-start rounded-md;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {\n @apply m-0 shrink-0 grow rounded-none border-0;\n flex-basis: 3em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {\n border: none;\n border-radius: 0px;\n width: 2em;\n margin: 0px;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n @apply rounded-md border;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {\n @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;\n }\n\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {\n @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;\n }\n\n /* Col vis styles */\n .dt-button-background {\n @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur-sm;\n }\n .dt-button-down-arrow {\n @apply text-[10px];\n }\n .dt-button-collection {\n @apply relative;\n [role="menu"] {\n @apply absolute -left-20 top-7 flex min-w-[200px] flex-col rounded-md border bg-background py-2 shadow before:mx-2 before:mb-2 before:text-xs before:text-muted-foreground/70 before:content-[\'Select_columns\'];\n button {\n @apply h-8 rounded-none border-none px-4 text-xs;\n }\n .dt-button.buttons-columnVisibility.dt-button-active {\n @apply text-foreground after:ml-auto after:content-[\'✓\'];\n }\n }\n }\n</style>\n',
700
700
  },
701
701
  ],
702
702
  utils: [],
@@ -711,7 +711,7 @@ export default [
711
711
  fileName: "DateField.vue",
712
712
  dirPath: "components/UI",
713
713
  fileContent:
714
- '<template>\r\n <DateFieldRoot\r\n v-slot="{ segments }"\r\n v-bind="props"\r\n v-model="localModel"\r\n :class="styles({ class: props.class })"\r\n >\r\n <template v-for="item in segments" :key="item.part">\r\n <DateFieldInput\r\n v-if="item.part === \'literal\'"\r\n :part="item.part"\r\n class="inline-flex items-center justify-center text-muted-foreground"\r\n >\r\n <Icon v-if="separatorIcon" :name="separatorIcon" class="text-muted-foreground" />\r\n <span v-else-if="separator" class="mx-1 text-muted-foreground">{{ separator }}</span>\r\n </DateFieldInput>\r\n <DateFieldInput\r\n v-else\r\n :part="item.part"\r\n class="inline-flex cursor-text items-center rounded px-1 transition focus:outline-none focus:ring-1 focus:ring-ring aria-[valuetext=Empty]:text-muted-foreground"\r\n >\r\n {{ item.value }}\r\n </DateFieldInput>\r\n </template>\r\n </DateFieldRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { type DateValue } from "@internationalized/date";\r\n import { DateFieldInput, DateFieldRoot } from "radix-vue";\r\n import type { DateFieldRootProps } from "radix-vue";\r\n\r\n const props = withDefaults(\r\n defineProps<\r\n DateFieldRootProps & {\r\n class?: any;\r\n separator?: string;\r\n separatorIcon?: string;\r\n }\r\n >(),\r\n {\r\n separator: "/",\r\n }\r\n );\r\n const localModel = defineModel<DateValue>();\r\n\r\n const styles = tv({\r\n base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[invalid]:border-destructive data-[disabled]:opacity-50 sm:text-sm",\r\n });\r\n</script>\r\n',
714
+ '<template>\n <DateFieldRoot\n v-slot="{ segments }"\n v-bind="props"\n v-model="localModel"\n :class="styles({ class: props.class })"\n >\n <template v-for="item in segments" :key="item.part">\n <DateFieldInput\n v-if="item.part === \'literal\'"\n :part="item.part"\n class="inline-flex items-center justify-center text-muted-foreground"\n >\n <Icon v-if="separatorIcon" :name="separatorIcon" class="text-muted-foreground" />\n <span v-else-if="separator" class="mx-1 text-muted-foreground">{{ separator }}</span>\n </DateFieldInput>\n <DateFieldInput\n v-else\n :part="item.part"\n class="inline-flex cursor-text items-center rounded px-1 transition focus:outline-none focus:ring-1 focus:ring-ring aria-[valuetext=Empty]:text-muted-foreground"\n >\n {{ item.value }}\n </DateFieldInput>\n </template>\n </DateFieldRoot>\n</template>\n\n<script lang="ts" setup>\n import { type DateValue } from "@internationalized/date";\n import { DateFieldInput, DateFieldRoot } from "radix-vue";\n import type { DateFieldRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n DateFieldRootProps & {\n class?: any;\n separator?: string;\n separatorIcon?: string;\n }\n >(),\n {\n separator: "/",\n }\n );\n const localModel = defineModel<DateValue>();\n\n const styles = tv({\n base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[invalid]:border-destructive data-[disabled]:opacity-50 sm:text-sm",\n });\n</script>\n',
715
715
  },
716
716
  ],
717
717
  utils: [],
@@ -746,13 +746,13 @@ export default [
746
746
  fileName: "Dialog/Close.vue",
747
747
  dirPath: "components/UI",
748
748
  fileContent:
749
- '<template>\n <DialogClose v-bind="props">\n <slot/>\n </DialogClose>\n</template>\n\n<script lang="ts" setup>\n import { DialogClose } from "radix-vue";\n import type { DialogCloseProps } from "radix-vue";\n\n const props = defineProps<DialogCloseProps>();\n</script>\n',
749
+ '<template>\n <DialogClose v-bind="props">\n <slot />\n </DialogClose>\n</template>\n\n<script lang="ts" setup>\n import { DialogClose } from "radix-vue";\n import type { DialogCloseProps } from "radix-vue";\n\n const props = defineProps<DialogCloseProps>();\n</script>\n',
750
750
  },
751
751
  {
752
752
  fileName: "Dialog/Content.vue",
753
753
  dirPath: "components/UI",
754
754
  fileContent:
755
- '<template>\n <UiDialogPortal :to="to">\n <UiDialogOverlay />\n <DialogContent :class="styles({ class: props.class })" v-bind="{ ...forwarded, ...$attrs }">\n <slot>\n <slot name="header">\n <UiDialogHeader>\n <slot name="title">\n <UiDialogTitle v-if="title" :title="title" />\n </slot>\n <slot name="description">\n <UiDialogDescription v-if="description" :description="description" />\n </slot>\n </UiDialogHeader>\n </slot>\n <slot name="content"/>\n <slot name="footer"/>\n </slot>\n <slot name="close">\n <UiDialogClose />\n </slot>\n <UiDialogClose\n v-if="!hideClose"\n class="absolute right-4 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"\n >\n <Icon name="lucide:x" class="h-4 w-4" />\n <span class="sr-only">Close</span>\n </UiDialogClose>\n </DialogContent>\n </UiDialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { DialogContent, useForwardPropsEmits } from "radix-vue";\n import type { DialogContentEmits, DialogContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = defineProps<\n DialogContentProps & {\n /** Icon to display in the close button */\n icon?: string;\n /** Title text */\n title?: string;\n /** Description text */\n description?: string;\n /** Custom class(es) to add to the parent */\n class?: any;\n /** Whether to hide the close button */\n hideClose?: boolean;\n /** Where to render the dialog */\n to?: string | HTMLElement;\n }\n >();\n const emits = defineEmits<DialogContentEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "icon", "title", "description", "class", "hideClose", "to"),\n emits\n );\n\n const styles = tv({\n base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",\n });\n</script>\n',
755
+ '<template>\n <UiDialogPortal :to="to">\n <UiDialogOverlay />\n <DialogContent :class="styles({ class: props.class })" v-bind="{ ...forwarded, ...$attrs }">\n <slot>\n <slot name="header">\n <UiDialogHeader>\n <slot name="title">\n <UiDialogTitle v-if="title" :title="title" />\n </slot>\n <slot name="description">\n <UiDialogDescription v-if="description" :description="description" />\n </slot>\n </UiDialogHeader>\n </slot>\n <slot name="content" />\n <slot name="footer" />\n </slot>\n <slot name="close">\n <UiDialogClose />\n </slot>\n <UiDialogClose\n v-if="!hideClose"\n class="absolute right-4 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"\n >\n <Icon name="lucide:x" class="h-4 w-4" />\n <span class="sr-only">Close</span>\n </UiDialogClose>\n </DialogContent>\n </UiDialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { DialogContent, useForwardPropsEmits } from "radix-vue";\n import type { DialogContentEmits, DialogContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = defineProps<\n DialogContentProps & {\n /** Icon to display in the close button */\n icon?: string;\n /** Title text */\n title?: string;\n /** Description text */\n description?: string;\n /** Custom class(es) to add to the parent */\n class?: any;\n /** Whether to hide the close button */\n hideClose?: boolean;\n /** Where to render the dialog */\n to?: string | HTMLElement;\n }\n >();\n const emits = defineEmits<DialogContentEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "icon", "title", "description", "class", "hideClose", "to"),\n emits\n );\n\n const styles = tv({\n base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",\n });\n</script>\n',
756
756
  },
757
757
  {
758
758
  fileName: "Dialog/Description.vue",
@@ -764,19 +764,19 @@ export default [
764
764
  fileName: "Dialog/Dialog.vue",
765
765
  dirPath: "components/UI",
766
766
  fileContent:
767
- '<template>\n <DialogRoot v-bind="forwarded">\n <slot/>\n </DialogRoot>\n</template>\n\n<script lang="ts" setup>\n import { DialogRoot, useForwardPropsEmits } from "radix-vue";\n import type { DialogRootEmits, DialogRootProps } from "radix-vue";\n\n const props = defineProps<DialogRootProps>();\n const emit = defineEmits<DialogRootEmits>();\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
767
+ '<template>\n <DialogRoot v-bind="forwarded">\n <slot />\n </DialogRoot>\n</template>\n\n<script lang="ts" setup>\n import { DialogRoot, useForwardPropsEmits } from "radix-vue";\n import type { DialogRootEmits, DialogRootProps } from "radix-vue";\n\n const props = defineProps<DialogRootProps>();\n const emit = defineEmits<DialogRootEmits>();\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
768
768
  },
769
769
  {
770
770
  fileName: "Dialog/Footer.vue",
771
771
  dirPath: "components/UI",
772
772
  fileContent:
773
- '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n });\n</script>\n',
773
+ '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n });\n</script>\n',
774
774
  },
775
775
  {
776
776
  fileName: "Dialog/Header.vue",
777
777
  dirPath: "components/UI",
778
778
  fileContent:
779
- '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col space-y-1.5 text-center sm:text-left",\n });\n</script>\n',
779
+ '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col space-y-1.5 text-center sm:text-left",\n });\n</script>\n',
780
780
  },
781
781
  {
782
782
  fileName: "Dialog/Overlay.vue",
@@ -832,49 +832,49 @@ export default [
832
832
  fileName: "Drawer/Close.vue",
833
833
  dirPath: "components/UI",
834
834
  fileContent:
835
- '<template>\r\n <DrawerClose v-bind="props">\r\n <slot />\r\n </DrawerClose>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerClose } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerClose>, "$props">> {}\r\n const props = defineProps<Props>();\r\n</script>\r\n',
835
+ '<template>\n <DrawerClose v-bind="props">\n <slot />\n </DrawerClose>\n</template>\n\n<script lang="ts" setup>\n import { DrawerClose } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerClose>, "$props">> {}\n const props = defineProps<Props>();\n</script>\n',
836
836
  },
837
837
  {
838
838
  fileName: "Drawer/Content.vue",
839
839
  dirPath: "components/UI",
840
840
  fileContent:
841
- '<template>\r\n <UiDrawerPortal>\r\n <slot name="overlay">\r\n <UiDrawerOverlay />\r\n </slot>\r\n <slot name="content">\r\n <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\r\n <slot name="knob">\r\n <div\r\n className="mx-auto shrink-0 cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"\r\n />\r\n </slot>\r\n <slot />\r\n </DrawerContent>\r\n </slot>\r\n </UiDrawerPortal>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerContent } from "vaul-vue";\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}\r\n\r\n const props = defineProps<Props & { class?: any }>();\r\n const styles = tv({\r\n base: "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",\r\n });\r\n</script>\r\n',
841
+ '<template>\n <UiDrawerPortal>\n <slot name="overlay">\n <UiDrawerOverlay />\n </slot>\n <slot name="content">\n <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\n <slot name="knob">\n <div\n className="mx-auto shrink-0 cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"\n />\n </slot>\n <slot />\n </DrawerContent>\n </slot>\n </UiDrawerPortal>\n</template>\n\n<script lang="ts" setup>\n import { DrawerContent } from "vaul-vue";\n\n defineOptions({ inheritAttrs: false });\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}\n\n const props = defineProps<Props & { class?: any }>();\n const styles = tv({\n base: "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",\n });\n</script>\n',
842
842
  },
843
843
  {
844
844
  fileName: "Drawer/Description.vue",
845
845
  dirPath: "components/UI",
846
846
  fileContent:
847
- '<template>\r\n <DrawerDescription v-bind="props" :class="styles({ class: props.class })">\r\n <slot>\r\n {{ props.text }}\r\n </slot>\r\n </DrawerDescription>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerDescription } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerDescription>, "$props">> {\r\n class?: any;\r\n text?: string;\r\n }\r\n\r\n const props = defineProps<Props>();\r\n\r\n const styles = tv({\r\n base: "text-sm text-muted-foreground",\r\n });\r\n</script>\r\n',
847
+ '<template>\n <DrawerDescription v-bind="props" :class="styles({ class: props.class })">\n <slot>\n {{ props.text }}\n </slot>\n </DrawerDescription>\n</template>\n\n<script lang="ts" setup>\n import { DrawerDescription } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerDescription>, "$props">> {\n class?: any;\n text?: string;\n }\n\n const props = defineProps<Props>();\n\n const styles = tv({\n base: "text-sm text-muted-foreground",\n });\n</script>\n',
848
848
  },
849
849
  {
850
850
  fileName: "Drawer/Drawer.vue",
851
851
  dirPath: "components/UI",
852
852
  fileContent:
853
- '<template>\r\n <DrawerRoot v-bind="forwarded">\r\n <slot />\r\n </DrawerRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { useForwardPropsEmits } from "radix-vue";\r\n import { DrawerRoot } from "vaul-vue";\r\n import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";\r\n\r\n const props = defineProps<DrawerRootProps>();\r\n const emits = defineEmits<DrawerRootEmits>();\r\n const forwarded = useForwardPropsEmits(props, emits);\r\n</script>\r\n',
853
+ '<template>\n <DrawerRoot v-bind="forwarded">\n <slot />\n </DrawerRoot>\n</template>\n\n<script lang="ts" setup>\n import { useForwardPropsEmits } from "radix-vue";\n import { DrawerRoot } from "vaul-vue";\n import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";\n\n const props = defineProps<DrawerRootProps>();\n const emits = defineEmits<DrawerRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
854
854
  },
855
855
  {
856
856
  fileName: "Drawer/Overlay.vue",
857
857
  dirPath: "components/UI",
858
858
  fileContent:
859
- '<template>\r\n <DrawerOverlay v-bind="props" :class="styles({ class: props.class })" />\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerOverlay } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerOverlay>, "$props">> {}\r\n\r\n const props = defineProps<Props & { class?: any }>();\r\n\r\n const styles = tv({\r\n base: "fixed inset-0 z-50 bg-black/40 backdrop-blur",\r\n });\r\n</script>\r\n',
859
+ '<template>\n <DrawerOverlay v-bind="props" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { DrawerOverlay } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerOverlay>, "$props">> {}\n\n const props = defineProps<Props & { class?: any }>();\n\n const styles = tv({\n base: "fixed inset-0 z-50 bg-black/40 backdrop-blur",\n });\n</script>\n',
860
860
  },
861
861
  {
862
862
  fileName: "Drawer/Portal.vue",
863
863
  dirPath: "components/UI",
864
864
  fileContent:
865
- '<template>\r\n <DrawerPortal v-bind="props">\r\n <slot />\r\n </DrawerPortal>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerPortal } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerPortal>, "$props">> {}\r\n\r\n const props = defineProps<Props>();\r\n</script>\r\n',
865
+ '<template>\n <DrawerPortal v-bind="props">\n <slot />\n </DrawerPortal>\n</template>\n\n<script lang="ts" setup>\n import { DrawerPortal } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerPortal>, "$props">> {}\n\n const props = defineProps<Props>();\n</script>\n',
866
866
  },
867
867
  {
868
868
  fileName: "Drawer/Title.vue",
869
869
  dirPath: "components/UI",
870
870
  fileContent:
871
- '<template>\r\n <DrawerTitle v-bind="props" :class="styles({ class: props.class })">\r\n <slot>\r\n {{ props.text }}\r\n </slot>\r\n </DrawerTitle>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerTitle } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTitle>, "$props">> {\r\n class?: any;\r\n text?: string;\r\n }\r\n\r\n const props = defineProps<Props>();\r\n\r\n const styles = tv({\r\n base: "text-lg font-semibold leading-none tracking-tight",\r\n });\r\n</script>\r\n',
871
+ '<template>\n <DrawerTitle v-bind="props" :class="styles({ class: props.class })">\n <slot>\n {{ props.text }}\n </slot>\n </DrawerTitle>\n</template>\n\n<script lang="ts" setup>\n import { DrawerTitle } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTitle>, "$props">> {\n class?: any;\n text?: string;\n }\n\n const props = defineProps<Props>();\n\n const styles = tv({\n base: "text-lg font-semibold leading-none tracking-tight",\n });\n</script>\n',
872
872
  },
873
873
  {
874
874
  fileName: "Drawer/Trigger.vue",
875
875
  dirPath: "components/UI",
876
876
  fileContent:
877
- '<template>\r\n <DrawerTrigger v-bind="props">\r\n <slot />\r\n </DrawerTrigger>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerTrigger } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTrigger>, "$props">> {}\r\n\r\n const props = defineProps<Props>();\r\n</script>\r\n',
877
+ '<template>\n <DrawerTrigger v-bind="props">\n <slot />\n </DrawerTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DrawerTrigger } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTrigger>, "$props">> {}\n\n const props = defineProps<Props>();\n</script>\n',
878
878
  },
879
879
  ],
880
880
  utils: [],
@@ -901,19 +901,19 @@ export default [
901
901
  fileName: "DropdownMenu/Content.vue",
902
902
  dirPath: "components/UI",
903
903
  fileContent:
904
- '<template>\n <UiDropdownMenuPortal>\n <DropdownMenuContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot/>\n </DropdownMenuContent>\n </UiDropdownMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuContent, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n DropdownMenuContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n loop: true,\n align: "center",\n sideOffset: 5,\n side: "bottom",\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<DropdownMenuContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
904
+ '<template>\n <UiDropdownMenuPortal>\n <DropdownMenuContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot />\n </DropdownMenuContent>\n </UiDropdownMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuContent, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n DropdownMenuContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n loop: true,\n align: "center",\n sideOffset: 5,\n side: "bottom",\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<DropdownMenuContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
905
905
  },
906
906
  {
907
907
  fileName: "DropdownMenu/DropdownMenu.vue",
908
908
  dirPath: "components/UI",
909
909
  fileContent:
910
- '<template>\n <DropdownMenuRoot v-bind="forwarded">\n <slot/>\n </DropdownMenuRoot>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuRoot, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuRootProps>();\n\n const emit = defineEmits<DropdownMenuRootEmits>();\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
910
+ '<template>\n <DropdownMenuRoot v-bind="forwarded">\n <slot />\n </DropdownMenuRoot>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuRoot, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuRootProps>();\n\n const emit = defineEmits<DropdownMenuRootEmits>();\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
911
911
  },
912
912
  {
913
913
  fileName: "DropdownMenu/Group.vue",
914
914
  dirPath: "components/UI",
915
915
  fileContent:
916
- '<template>\n <DropdownMenuGroup v-bind="props">\n <slot/>\n </DropdownMenuGroup>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuGroup } from "radix-vue";\n import type { DropdownMenuGroupProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuGroupProps>();\n</script>\n',
916
+ '<template>\n <DropdownMenuGroup v-bind="props">\n <slot />\n </DropdownMenuGroup>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuGroup } from "radix-vue";\n import type { DropdownMenuGroupProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuGroupProps>();\n</script>\n',
917
917
  },
918
918
  {
919
919
  fileName: "DropdownMenu/Item.vue",
@@ -937,13 +937,13 @@ export default [
937
937
  fileName: "DropdownMenu/Portal.vue",
938
938
  dirPath: "components/UI",
939
939
  fileContent:
940
- '<template>\n <DropdownMenuPortal v-bind="props">\n <slot/>\n </DropdownMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuPortal } from "radix-vue";\n import type { DropdownMenuPortalProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuPortalProps>();\n</script>\n',
940
+ '<template>\n <DropdownMenuPortal v-bind="props">\n <slot />\n </DropdownMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuPortal } from "radix-vue";\n import type { DropdownMenuPortalProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuPortalProps>();\n</script>\n',
941
941
  },
942
942
  {
943
943
  fileName: "DropdownMenu/RadioGroup.vue",
944
944
  dirPath: "components/UI",
945
945
  fileContent:
946
- '<template>\n <DropdownMenuRadioGroup v-bind="forwarded">\n <slot/>\n </DropdownMenuRadioGroup>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuRadioGroup, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuRadioGroupProps>();\n\n const emits = defineEmits<DropdownMenuRadioGroupEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
946
+ '<template>\n <DropdownMenuRadioGroup v-bind="forwarded">\n <slot />\n </DropdownMenuRadioGroup>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuRadioGroup, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuRadioGroupProps>();\n\n const emits = defineEmits<DropdownMenuRadioGroupEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
947
947
  },
948
948
  {
949
949
  fileName: "DropdownMenu/RadioItem.vue",
@@ -967,13 +967,13 @@ export default [
967
967
  fileName: "DropdownMenu/Sub.vue",
968
968
  dirPath: "components/UI",
969
969
  fileContent:
970
- '<template>\n <DropdownMenuSub v-bind="forwarded">\n <slot/>\n </DropdownMenuSub>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuSub, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuSubProps>();\n const emits = defineEmits<DropdownMenuSubEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
970
+ '<template>\n <DropdownMenuSub v-bind="forwarded">\n <slot />\n </DropdownMenuSub>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuSub, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuSubProps>();\n const emits = defineEmits<DropdownMenuSubEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
971
971
  },
972
972
  {
973
973
  fileName: "DropdownMenu/SubContent.vue",
974
974
  dirPath: "components/UI",
975
975
  fileContent:
976
- '<template>\n <UiDropdownMenuPortal :to="to">\n <DropdownMenuSubContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot/>\n </DropdownMenuSubContent>\n </UiDropdownMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuSubContent, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(\n defineProps<\n DropdownMenuSubContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The element to render the portal into */\n to?: string | HTMLElement;\n }\n >(),\n {\n loop: true,\n sideOffset: 8,\n avoidCollisions: true,\n collisionPadding: 5,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<DropdownMenuSubContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[180px] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
976
+ '<template>\n <UiDropdownMenuPortal :to="to">\n <DropdownMenuSubContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot />\n </DropdownMenuSubContent>\n </UiDropdownMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuSubContent, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(\n defineProps<\n DropdownMenuSubContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The element to render the portal into */\n to?: string | HTMLElement;\n }\n >(),\n {\n loop: true,\n sideOffset: 8,\n avoidCollisions: true,\n collisionPadding: 5,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<DropdownMenuSubContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[180px] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
977
977
  },
978
978
  {
979
979
  fileName: "DropdownMenu/SubTrigger.vue",
@@ -985,7 +985,7 @@ export default [
985
985
  fileName: "DropdownMenu/Trigger.vue",
986
986
  dirPath: "components/UI",
987
987
  fileContent:
988
- '<template>\n <DropdownMenuTrigger v-bind="props">\n <slot/>\n </DropdownMenuTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuTrigger } from "radix-vue";\n import type { DropdownMenuTriggerProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuTriggerProps>();\n</script>\n',
988
+ '<template>\n <DropdownMenuTrigger v-bind="props">\n <slot />\n </DropdownMenuTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuTrigger } from "radix-vue";\n import type { DropdownMenuTriggerProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuTriggerProps>();\n</script>\n',
989
989
  },
990
990
  ],
991
991
  utils: [],
@@ -1000,7 +1000,22 @@ export default [
1000
1000
  fileName: "Dropfile.vue",
1001
1001
  dirPath: "components/UI",
1002
1002
  fileContent:
1003
- '<template>\r\n <div ref="dropZoneRef" :class="styles({ isOverDropZone, class: props.class })" @click="open()">\r\n <slot name="message">\r\n <div class="py-10 text-center">\r\n <slot name="icon">\r\n <div\r\n v-if="icon"\r\n class="inline-flex items-center justify-center rounded-md border p-2 transition"\r\n :class="[isOverDropZone && \'animate-bounce border-primary\']"\r\n >\r\n <Icon\r\n :name="icon"\r\n class="h-7 w-7 opacity-70"\r\n :class="[isOverDropZone && \'text-primary\']"\r\n />\r\n </div>\r\n </slot>\r\n <slot name="title">\r\n <p class="mt-5 text-sm font-medium" v-html="title" />\r\n </slot>\r\n <slot name="subtext">\r\n <p class="mt-1 text-sm text-muted-foreground/60" v-html="subtext" />\r\n </slot>\r\n </div>\r\n </slot>\r\n </div>\r\n</template>\r\n\r\n<script setup lang="ts">\r\n const props = withDefaults(\r\n defineProps<{\r\n /**\r\n * The text to display as the title of the dropzone.\r\n */\r\n title?: string;\r\n /**\r\n * The text to display as the subtext of the dropzone.\r\n */\r\n subtext?: string;\r\n /**\r\n * The icon to display in the dropzone.\r\n */\r\n icon?: string;\r\n /**\r\n * The function to call when files are dropped.\r\n */\r\n // eslint-disable-next-line @typescript-eslint/ban-types\r\n onDrop?: Function;\r\n /**\r\n * Whether or not to allow multiple files to be picked. Does not affect drag and drop.\r\n */\r\n multiple?: boolean;\r\n /**\r\n * The file types to accept. Does not affect drag and drop.\r\n */\r\n accept?: string;\r\n class?: any;\r\n }>(),\r\n {\r\n title: "Click to upload or drag & drop files.",\r\n subtext: "All file types accepted",\r\n icon: "heroicons:cloud-arrow-up",\r\n multiple: true,\r\n accept: "*",\r\n }\r\n );\r\n\r\n const { open, reset, onChange } = useFileDialog({\r\n multiple: props.multiple,\r\n accept: props.accept,\r\n });\r\n\r\n onChange((files: FileList | null) => {\r\n if (files?.length) {\r\n handleDrop(Array.from(files || []));\r\n reset();\r\n }\r\n });\r\n\r\n const dropZoneRef = ref<HTMLDivElement>();\r\n const emits = defineEmits<{\r\n dropped: [any];\r\n }>();\r\n\r\n const handleDrop = (files: File[] | null) => {\r\n if (!files) return;\r\n if (props.onDrop) props.onDrop(files);\r\n emits("dropped", files);\r\n };\r\n\r\n const { isOverDropZone } = useDropZone(dropZoneRef, handleDrop);\r\n\r\n const styles = tv({\r\n base: "flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed transition hover:border-primary",\r\n variants: {\r\n isOverDropZone: { true: "border-primary bg-primary/10" },\r\n },\r\n });\r\n</script>\r\n',
1003
+ '<template>\n <div ref="dropZoneRef" :class="styles({ isOverDropZone, class: props.class })" @click="open()">\n <slot name="message">\n <div class="py-10 text-center">\n <slot name="icon">\n <div\n v-if="icon"\n class="inline-flex items-center justify-center rounded-md border p-2 transition"\n :class="[isOverDropZone && \'animate-bounce border-primary\']"\n >\n <Icon\n :name="icon"\n class="h-7 w-7 opacity-70"\n :class="[isOverDropZone && \'text-primary\']"\n />\n </div>\n </slot>\n <slot name="title">\n <p class="mt-5 text-sm font-medium" v-html="title" />\n </slot>\n <slot name="subtext">\n <p class="mt-1 text-sm text-muted-foreground/60" v-html="subtext" />\n </slot>\n </div>\n </slot>\n </div>\n</template>\n\n<script setup lang="ts">\n const props = withDefaults(\n defineProps<{\n /**\n * The text to display as the title of the dropzone.\n */\n title?: string;\n /**\n * The text to display as the subtext of the dropzone.\n */\n subtext?: string;\n /**\n * The icon to display in the dropzone.\n */\n icon?: string;\n /**\n * The function to call when files are dropped.\n */\n // eslint-disable-next-line @typescript-eslint/ban-types\n onDrop?: Function;\n /**\n * Whether or not to allow multiple files to be picked. Does not affect drag and drop.\n */\n multiple?: boolean;\n /**\n * The file types to accept. Does not affect drag and drop.\n */\n accept?: string;\n class?: any;\n }>(),\n {\n title: "Click to upload or drag & drop files.",\n subtext: "All file types accepted",\n icon: "heroicons:cloud-arrow-up",\n multiple: true,\n accept: "*",\n }\n );\n\n const { open, reset, onChange } = useFileDialog({\n multiple: props.multiple,\n accept: props.accept,\n });\n\n onChange((files: FileList | null) => {\n if (files?.length) {\n handleDrop(Array.from(files || []));\n reset();\n }\n });\n\n const dropZoneRef = ref<HTMLDivElement>();\n const emits = defineEmits<{\n dropped: [any];\n }>();\n\n const handleDrop = (files: File[] | null) => {\n if (!files) return;\n if (props.onDrop) props.onDrop(files);\n emits("dropped", files);\n };\n\n const { isOverDropZone } = useDropZone(dropZoneRef, handleDrop);\n\n const styles = tv({\n base: "flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed transition hover:border-primary",\n variants: {\n isOverDropZone: { true: "border-primary bg-primary/10" },\n },\n });\n</script>\n',
1004
+ },
1005
+ ],
1006
+ utils: [],
1007
+ composables: [],
1008
+ plugins: [],
1009
+ },
1010
+ {
1011
+ name: "Fancy Icon",
1012
+ value: "fancy-icon",
1013
+ files: [
1014
+ {
1015
+ fileName: "FancyIcon.vue",
1016
+ dirPath: "components/UI",
1017
+ fileContent:
1018
+ '<template>\n <div :class="styles().base({ class: props.class, color, type, size, circle })">\n <slot :styles="styles().icon({ color, type, size, circle })">\n <Icon :name="icon" :class="styles().icon({ color, type, size, circle })" />\n </slot>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n class?: any;\n icon: string;\n color?: VariantProps<typeof styles>["color"];\n type?: VariantProps<typeof styles>["type"];\n size?: VariantProps<typeof styles>["size"];\n circle?: boolean;\n }>(),\n {\n color: "primary",\n type: "modern",\n size: "lg",\n circle: false,\n }\n );\n\n const styles = tv({\n slots: {\n base: "flex shrink-0 items-center justify-center",\n icon: "",\n },\n\n variants: {\n color: {\n primary: {\n base: "",\n icon: "",\n },\n success: {\n base: "",\n icon: "",\n },\n warning: {\n base: "",\n icon: "",\n },\n error: {\n base: "",\n icon: "",\n },\n info: {\n base: "",\n icon: "",\n },\n },\n type: {\n light: {\n base: "",\n icon: "",\n },\n dark: {\n base: "",\n icon: "",\n },\n modern: {\n base: "",\n icon: "",\n },\n },\n size: {\n sm: {\n base: "size-8",\n icon: "size-4",\n },\n md: {\n base: "size-10",\n icon: "size-5",\n },\n lg: {\n base: "size-12",\n icon: "size-6",\n },\n xl: {\n base: "size-14",\n icon: "size-7",\n },\n },\n circle: {\n true: {\n base: "rounded-full",\n },\n false: {\n base: "rounded-lg",\n },\n },\n },\n compoundVariants: [\n {\n color: "primary",\n type: "light",\n class: { base: "bg-primary/5 ", icon: "text-primary" },\n },\n {\n color: "success",\n type: "light",\n class: {\n base: "bg-green-500/10",\n icon: "text-green-600",\n },\n },\n {\n color: "warning",\n type: "light",\n class: { base: "bg-amber-500/10", icon: "text-amber-600" },\n },\n {\n color: "error",\n type: "light",\n class: { base: "bg-destructive/10", icon: "text-destructive" },\n },\n {\n color: "info",\n type: "light",\n class: { base: "bg-blue-500/10", icon: "text-blue-600" },\n },\n // Dark\n {\n color: "primary",\n type: "dark",\n class: { base: "bg-primary", icon: "text-primary-foreground" },\n },\n {\n color: "success",\n type: "dark",\n class: { base: "bg-green-600", icon: "text-green-50" },\n },\n {\n color: "warning",\n type: "dark",\n class: { base: "bg-amber-600", icon: "text-amber-50" },\n },\n {\n color: "error",\n type: "dark",\n class: { base: "bg-destructive", icon: "text-destructive-foreground" },\n },\n {\n color: "info",\n type: "dark",\n class: { base: "bg-blue-500", icon: "text-blue-50" },\n },\n // Modern\n {\n type: "modern",\n class: { base: "border bg-background", icon: "text-muted-foreground" },\n },\n ],\n defaultVariants: {\n color: "primary",\n type: "modern",\n size: "lg",\n circle: false,\n },\n });\n</script>\n',
1004
1019
  },
1005
1020
  ],
1006
1021
  utils: [],
@@ -1031,7 +1046,7 @@ export default [
1031
1046
  fileName: "Form/Description.vue",
1032
1047
  dirPath: "components/UI",
1033
1048
  fileContent:
1034
- '<template>\n <p :id="formDescriptionId" :class="styles({ class: props.class })" v-bind="$attrs">\n <slot>\n <ClientOnly>\n <p v-html="description"/>\n </ClientOnly>\n </slot>\n </p>\n</template>\n<script lang="ts" setup>\n defineOptions({ inheritAttrs: false });\n\n const { formDescriptionId } = useFormField();\n const props = defineProps<{ class?: any; description?: string }>();\n const styles = tv({ base: "text-sm text-muted-foreground" });\n</script>\n',
1049
+ '<template>\n <p :id="formDescriptionId" :class="styles({ class: props.class })" v-bind="$attrs">\n <slot>\n <ClientOnly>\n <p v-html="description" />\n </ClientOnly>\n </slot>\n </p>\n</template>\n<script lang="ts" setup>\n defineOptions({ inheritAttrs: false });\n\n const { formDescriptionId } = useFormField();\n const props = defineProps<{ class?: any; description?: string }>();\n const styles = tv({ base: "text-sm text-muted-foreground" });\n</script>\n',
1035
1050
  },
1036
1051
  {
1037
1052
  fileName: "Form/Item.vue",
@@ -1084,25 +1099,25 @@ export default [
1084
1099
  fileName: "HoverCard/Content.vue",
1085
1100
  dirPath: "components/UI",
1086
1101
  fileContent:
1087
- '<template>\n <UiHoverCardPortal :to="to">\n <HoverCardContent\n v-bind="{ ...reactiveOmit(props, \'class\', \'to\'), ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot/>\n </HoverCardContent>\n </UiHoverCardPortal>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardContent } from "radix-vue";\n import type { HoverCardContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n HoverCardContentProps & {\n /** Custom class(es) to add to the content */\n class?: any;\n /** The element or selector the content should be positioned relative to */\n to?: string | HTMLElement;\n }\n >(),\n {\n side: "bottom",\n sideOffset: 5,\n align: "center",\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const styles = tv({\n base: "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
1102
+ '<template>\n <UiHoverCardPortal :to="to">\n <HoverCardContent\n v-bind="{ ...reactiveOmit(props, \'class\', \'to\'), ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot />\n </HoverCardContent>\n </UiHoverCardPortal>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardContent } from "radix-vue";\n import type { HoverCardContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n HoverCardContentProps & {\n /** Custom class(es) to add to the content */\n class?: any;\n /** The element or selector the content should be positioned relative to */\n to?: string | HTMLElement;\n }\n >(),\n {\n side: "bottom",\n sideOffset: 5,\n align: "center",\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const styles = tv({\n base: "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
1088
1103
  },
1089
1104
  {
1090
1105
  fileName: "HoverCard/HoverCard.vue",
1091
1106
  dirPath: "components/UI",
1092
1107
  fileContent:
1093
- '<template>\n <HoverCardRoot v-bind="forwarded">\n <slot/>\n </HoverCardRoot>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardRoot, useForwardPropsEmits } from "radix-vue";\n import type { HoverCardRootEmits, HoverCardRootProps } from "radix-vue";\n\n const props = withDefaults(defineProps<HoverCardRootProps>(), {\n openDelay: 200,\n closeDelay: 200,\n });\n\n const emits = defineEmits<HoverCardRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1108
+ '<template>\n <HoverCardRoot v-bind="forwarded">\n <slot />\n </HoverCardRoot>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardRoot, useForwardPropsEmits } from "radix-vue";\n import type { HoverCardRootEmits, HoverCardRootProps } from "radix-vue";\n\n const props = withDefaults(defineProps<HoverCardRootProps>(), {\n openDelay: 200,\n closeDelay: 200,\n });\n\n const emits = defineEmits<HoverCardRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1094
1109
  },
1095
1110
  {
1096
1111
  fileName: "HoverCard/Portal.vue",
1097
1112
  dirPath: "components/UI",
1098
1113
  fileContent:
1099
- '<template>\n <HoverCardPortal v-bind="props">\n <slot/>\n </HoverCardPortal>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardPortal } from "radix-vue";\n import type { HoverCardPortalProps } from "radix-vue";\n\n const props = defineProps<HoverCardPortalProps>();\n</script>\n',
1114
+ '<template>\n <HoverCardPortal v-bind="props">\n <slot />\n </HoverCardPortal>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardPortal } from "radix-vue";\n import type { HoverCardPortalProps } from "radix-vue";\n\n const props = defineProps<HoverCardPortalProps>();\n</script>\n',
1100
1115
  },
1101
1116
  {
1102
1117
  fileName: "HoverCard/Trigger.vue",
1103
1118
  dirPath: "components/UI",
1104
1119
  fileContent:
1105
- '<template>\n <HoverCardTrigger v-bind="props">\n <slot/>\n </HoverCardTrigger>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardTrigger } from "radix-vue";\n import type { HoverCardTriggerProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = defineProps<HoverCardTriggerProps>();\n</script>\n',
1120
+ '<template>\n <HoverCardTrigger v-bind="props">\n <slot />\n </HoverCardTrigger>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardTrigger } from "radix-vue";\n import type { HoverCardTriggerProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = defineProps<HoverCardTriggerProps>();\n</script>\n',
1106
1121
  },
1107
1122
  ],
1108
1123
  utils: [],
@@ -1118,7 +1133,7 @@ export default [
1118
1133
  fileName: "Input.vue",
1119
1134
  dirPath: "components/UI",
1120
1135
  fileContent:
1121
- '<template>\r\n <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" >\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = withDefaults(\r\n defineProps<{\r\n class?: any;\r\n id?: string;\r\n name?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n required?: boolean;\r\n type?: string;\r\n modelValue?: any;\r\n }>(),\r\n { type: "text" }\r\n );\r\n const emits = defineEmits<{\r\n "update:modelValue": [value: any];\r\n }>();\r\n const localModel = useVModel(props, "modelValue", emits);\r\n\r\n const styles = tv({\r\n base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\r\n });\r\n</script>\r\n',
1136
+ '<template>\n <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" >\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n class?: any;\n id?: string;\n name?: string;\n placeholder?: string;\n disabled?: boolean;\n required?: boolean;\n type?: string;\n modelValue?: any;\n }>(),\n { type: "text" }\n );\n const emits = defineEmits<{\n "update:modelValue": [value: any];\n }>();\n const localModel = useVModel(props, "modelValue", emits);\n\n const styles = tv({\n base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n });\n</script>\n',
1122
1137
  },
1123
1138
  ],
1124
1139
  utils: [],
@@ -1163,19 +1178,19 @@ export default [
1163
1178
  fileName: "List/Content.vue",
1164
1179
  dirPath: "components/UI",
1165
1180
  fileContent:
1166
- '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col gap-1 leading-none",\n });\n</script>\n',
1181
+ '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col gap-1 leading-none",\n });\n</script>\n',
1167
1182
  },
1168
1183
  {
1169
1184
  fileName: "List/Item.vue",
1170
1185
  dirPath: "components/UI",
1171
1186
  fileContent:
1172
- '<template>\n <component\n :is="eltype"\n :href="href"\n :to="to"\n :class="\n styles({\n hover: Boolean(onClick) || Boolean(to) || Boolean(href),\n class: props.class,\n })\n "\n @click="onClick"\n >\n <slot/>\n </component>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n /**Custom class(es) to add to the element */\n class?: any;\n /** Function called when the item is clicked */\n onClick?: () => void;\n /** The location that the item should navigate to when clicked */\n to?: string;\n /** The href for the `a` tag */\n href?: string;\n }>();\n\n const styles = tv({\n base: "flex w-full items-center gap-5 px-4 py-2",\n variants: {\n hover: {\n true: "cursor-pointer outline-none hover:bg-muted focus-visible:ring-4 focus-visible:ring-primary/10",\n },\n },\n });\n\n const eltype = computed(() => {\n if (props.to || props.href) return resolveComponent("NuxtLink");\n if (props.onClick) return "button";\n return "li";\n });\n</script>\n',
1187
+ '<template>\n <component\n :is="eltype"\n :href="href"\n :to="to"\n :class="\n styles({\n hover: Boolean(onClick) || Boolean(to) || Boolean(href),\n class: props.class,\n })\n "\n @click="onClick"\n >\n <slot />\n </component>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n /**Custom class(es) to add to the element */\n class?: any;\n /** Function called when the item is clicked */\n onClick?: () => void;\n /** The location that the item should navigate to when clicked */\n to?: string;\n /** The href for the `a` tag */\n href?: string;\n }>();\n\n const styles = tv({\n base: "flex w-full items-center gap-5 px-4 py-2",\n variants: {\n hover: {\n true: "cursor-pointer outline-none hover:bg-muted focus-visible:ring-4 focus-visible:ring-primary/10",\n },\n },\n });\n\n const eltype = computed(() => {\n if (props.to || props.href) return resolveComponent("NuxtLink");\n if (props.onClick) return "button";\n return "li";\n });\n</script>\n',
1173
1188
  },
1174
1189
  {
1175
1190
  fileName: "List/List.vue",
1176
1191
  dirPath: "components/UI",
1177
1192
  fileContent:
1178
- '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "ul",\n }\n );\n\n const styles = tv({\n base: "w-full py-2",\n });\n</script>\n',
1193
+ '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "ul",\n }\n );\n\n const styles = tv({\n base: "w-full py-2",\n });\n</script>\n',
1179
1194
  },
1180
1195
  {
1181
1196
  fileName: "List/Subtitle.vue",
@@ -1214,13 +1229,13 @@ export default [
1214
1229
  fileName: "Menubar/Content.vue",
1215
1230
  dirPath: "components/UI",
1216
1231
  fileContent:
1217
- '<template>\n <UiMenubarPortal :to="to">\n <MenubarContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot/>\n </MenubarContent>\n </UiMenubarPortal>\n</template>\n\n<script lang="ts" setup>\n import { MenubarContent, useForwardPropsEmits } from "radix-vue";\n import type { MenubarContentProps, MenubarSubContentEmits } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n MenubarContentProps & {\n to?: string | HTMLElement;\n class?: any;\n }\n >(),\n {\n loop: true,\n side: "bottom",\n sideOffset: 8,\n align: "start",\n alignOffset: -4,\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<MenubarSubContentEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[220px] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
1232
+ '<template>\n <UiMenubarPortal :to="to">\n <MenubarContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot />\n </MenubarContent>\n </UiMenubarPortal>\n</template>\n\n<script lang="ts" setup>\n import { MenubarContent, useForwardPropsEmits } from "radix-vue";\n import type { MenubarContentProps, MenubarSubContentEmits } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n MenubarContentProps & {\n to?: string | HTMLElement;\n class?: any;\n }\n >(),\n {\n loop: true,\n side: "bottom",\n sideOffset: 8,\n align: "start",\n alignOffset: -4,\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<MenubarSubContentEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[220px] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
1218
1233
  },
1219
1234
  {
1220
1235
  fileName: "Menubar/Group.vue",
1221
1236
  dirPath: "components/UI",
1222
1237
  fileContent:
1223
- '<template>\n <MenubarGroup v-bind="props">\n <slot/>\n </MenubarGroup>\n</template>\n\n<script lang="ts" setup>\n import { MenubarGroup } from "radix-vue";\n import type { MenubarGroupProps } from "radix-vue";\n\n const props = defineProps<MenubarGroupProps>();\n</script>\n',
1238
+ '<template>\n <MenubarGroup v-bind="props">\n <slot />\n </MenubarGroup>\n</template>\n\n<script lang="ts" setup>\n import { MenubarGroup } from "radix-vue";\n import type { MenubarGroupProps } from "radix-vue";\n\n const props = defineProps<MenubarGroupProps>();\n</script>\n',
1224
1239
  },
1225
1240
  {
1226
1241
  fileName: "Menubar/Item.vue",
@@ -1238,31 +1253,31 @@ export default [
1238
1253
  fileName: "Menubar/Label.vue",
1239
1254
  dirPath: "components/UI",
1240
1255
  fileContent:
1241
- '<template>\n <MenubarLabel\n :class="styles({ inset, class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'inset\')"\n >\n <slot/>\n </MenubarLabel>\n</template>\n\n<script lang="ts" setup>\n import { MenubarLabel } from "radix-vue";\n import type { MenubarLabelProps } from "radix-vue";\n\n const props = defineProps<\n MenubarLabelProps & {\n class?: any;\n inset?: boolean;\n }\n >();\n\n const styles = tv({\n base: "px-2 py-1.5 text-sm font-semibold",\n variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
1256
+ '<template>\n <MenubarLabel\n :class="styles({ inset, class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'inset\')"\n >\n <slot />\n </MenubarLabel>\n</template>\n\n<script lang="ts" setup>\n import { MenubarLabel } from "radix-vue";\n import type { MenubarLabelProps } from "radix-vue";\n\n const props = defineProps<\n MenubarLabelProps & {\n class?: any;\n inset?: boolean;\n }\n >();\n\n const styles = tv({\n base: "px-2 py-1.5 text-sm font-semibold",\n variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
1242
1257
  },
1243
1258
  {
1244
1259
  fileName: "Menubar/Menu.vue",
1245
1260
  dirPath: "components/UI",
1246
1261
  fileContent:
1247
- '<template>\n <MenubarMenu v-bind="props">\n <slot/>\n </MenubarMenu>\n</template>\n\n<script lang="ts" setup>\n import { MenubarMenu } from "radix-vue";\n import type { MenubarMenuProps } from "radix-vue";\n\n const props = defineProps<MenubarMenuProps>();\n</script>\n',
1262
+ '<template>\n <MenubarMenu v-bind="props">\n <slot />\n </MenubarMenu>\n</template>\n\n<script lang="ts" setup>\n import { MenubarMenu } from "radix-vue";\n import type { MenubarMenuProps } from "radix-vue";\n\n const props = defineProps<MenubarMenuProps>();\n</script>\n',
1248
1263
  },
1249
1264
  {
1250
1265
  fileName: "Menubar/Menubar.vue",
1251
1266
  dirPath: "components/UI",
1252
1267
  fileContent:
1253
- '<template>\n <MenubarRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot/>\n </MenubarRoot>\n</template>\n\n<script lang="ts" setup>\n import { MenubarRoot, useForwardPropsEmits } from "radix-vue";\n import type { MenubarRootEmits, MenubarRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n MenubarRootProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n loop: true,\n }\n );\n\n const emits = defineEmits<MenubarRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "inline-flex h-10 items-center space-x-1 rounded-md border bg-background p-1",\n });\n</script>\n',
1268
+ '<template>\n <MenubarRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot />\n </MenubarRoot>\n</template>\n\n<script lang="ts" setup>\n import { MenubarRoot, useForwardPropsEmits } from "radix-vue";\n import type { MenubarRootEmits, MenubarRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n MenubarRootProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n loop: true,\n }\n );\n\n const emits = defineEmits<MenubarRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "inline-flex h-10 items-center space-x-1 rounded-md border bg-background p-1",\n });\n</script>\n',
1254
1269
  },
1255
1270
  {
1256
1271
  fileName: "Menubar/Portal.vue",
1257
1272
  dirPath: "components/UI",
1258
1273
  fileContent:
1259
- '<template>\n <MenubarPortal v-bind="props">\n <slot/>\n </MenubarPortal>\n</template>\n\n<script lang="ts" setup>\n import { type MenubarPortalProps } from "radix-vue";\n\n const props = defineProps<MenubarPortalProps>();\n</script>\n',
1274
+ '<template>\n <MenubarPortal v-bind="props">\n <slot />\n </MenubarPortal>\n</template>\n\n<script lang="ts" setup>\n import { type MenubarPortalProps } from "radix-vue";\n\n const props = defineProps<MenubarPortalProps>();\n</script>\n',
1260
1275
  },
1261
1276
  {
1262
1277
  fileName: "Menubar/RadioGroup.vue",
1263
1278
  dirPath: "components/UI",
1264
1279
  fileContent:
1265
- '<template>\n <MenubarRadioGroup v-bind="forwarded">\n <slot/>\n </MenubarRadioGroup>\n</template>\n\n<script lang="ts" setup>\n import { MenubarRadioGroup, useForwardPropsEmits } from "radix-vue";\n import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from "radix-vue";\n\n const props = defineProps<MenubarRadioGroupProps>();\n const emits = defineEmits<MenubarRadioGroupEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1280
+ '<template>\n <MenubarRadioGroup v-bind="forwarded">\n <slot />\n </MenubarRadioGroup>\n</template>\n\n<script lang="ts" setup>\n import { MenubarRadioGroup, useForwardPropsEmits } from "radix-vue";\n import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from "radix-vue";\n\n const props = defineProps<MenubarRadioGroupProps>();\n const emits = defineEmits<MenubarRadioGroupEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1266
1281
  },
1267
1282
  {
1268
1283
  fileName: "Menubar/RadioItem.vue",
@@ -1286,13 +1301,13 @@ export default [
1286
1301
  fileName: "Menubar/Sub.vue",
1287
1302
  dirPath: "components/UI",
1288
1303
  fileContent:
1289
- '<template>\n <MenubarSub v-bind="forwarded">\n <slot/>\n </MenubarSub>\n</template>\n\n<script lang="ts" setup>\n import { MenubarSub, useForwardPropsEmits } from "radix-vue";\n import type { MenubarSubEmits, MenubarSubProps } from "radix-vue";\n\n const props = defineProps<MenubarSubProps>();\n const emits = defineEmits<MenubarSubEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1304
+ '<template>\n <MenubarSub v-bind="forwarded">\n <slot />\n </MenubarSub>\n</template>\n\n<script lang="ts" setup>\n import { MenubarSub, useForwardPropsEmits } from "radix-vue";\n import type { MenubarSubEmits, MenubarSubProps } from "radix-vue";\n\n const props = defineProps<MenubarSubProps>();\n const emits = defineEmits<MenubarSubEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1290
1305
  },
1291
1306
  {
1292
1307
  fileName: "Menubar/SubContent.vue",
1293
1308
  dirPath: "components/UI",
1294
1309
  fileContent:
1295
- '<template>\n <UiMenubarPortal :to="to">\n <MenubarSubContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot/>\n </MenubarSubContent>\n </UiMenubarPortal>\n</template>\n\n<script lang="ts" setup>\n import { MenubarSubContent, useForwardPropsEmits } from "radix-vue";\n import type { MenubarSubContentEmits, MenubarSubContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(\n defineProps<\n MenubarSubContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The target element to portal the component to */\n to?: string | HTMLElement;\n }\n >(),\n {\n loop: true,\n sideOffset: 5,\n avoidCollisions: true,\n collisionPadding: 8,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<MenubarSubContentEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
1310
+ '<template>\n <UiMenubarPortal :to="to">\n <MenubarSubContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot />\n </MenubarSubContent>\n </UiMenubarPortal>\n</template>\n\n<script lang="ts" setup>\n import { MenubarSubContent, useForwardPropsEmits } from "radix-vue";\n import type { MenubarSubContentEmits, MenubarSubContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(\n defineProps<\n MenubarSubContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The target element to portal the component to */\n to?: string | HTMLElement;\n }\n >(),\n {\n loop: true,\n sideOffset: 5,\n avoidCollisions: true,\n collisionPadding: 8,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<MenubarSubContentEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
1296
1311
  },
1297
1312
  {
1298
1313
  fileName: "Menubar/SubTrigger.vue",
@@ -1304,7 +1319,7 @@ export default [
1304
1319
  fileName: "Menubar/Trigger.vue",
1305
1320
  dirPath: "components/UI",
1306
1321
  fileContent:
1307
- '<template>\n <MenubarTrigger :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </MenubarTrigger>\n</template>\n\n<script lang="ts" setup>\n import { MenubarTrigger } from "radix-vue";\n import type { MenubarTriggerProps } from "radix-vue";\n\n const props = defineProps<\n MenubarTriggerProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "flex cursor-pointer select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",\n });\n</script>\n',
1322
+ '<template>\n <MenubarTrigger :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </MenubarTrigger>\n</template>\n\n<script lang="ts" setup>\n import { MenubarTrigger } from "radix-vue";\n import type { MenubarTriggerProps } from "radix-vue";\n\n const props = defineProps<\n MenubarTriggerProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "flex cursor-pointer select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",\n });\n</script>\n',
1308
1323
  },
1309
1324
  ],
1310
1325
  utils: [],
@@ -1320,7 +1335,7 @@ export default [
1320
1335
  fileName: "NativeSelect.vue",
1321
1336
  dirPath: "components/UI",
1322
1337
  fileContent:
1323
- '<template>\r\n <div class="relative">\r\n <select\r\n :id="id"\r\n ref="select"\r\n v-model="localModel"\r\n :multiple="multiple"\r\n :name="name"\r\n :size="size"\r\n :placeholder="placeholder"\r\n :disabled="disabled"\r\n :required="required"\r\n :class="styles({ class: props.class })"\r\n >\r\n <slot/>\r\n </select>\r\n <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center justify-center">\r\n <slot name="trailingIcon">\r\n <Icon\r\n :name="trailingIcon || \'lucide:chevrons-up-down\'"\r\n class="h-4 w-4 text-muted-foreground"\r\n />\r\n </slot>\r\n </span>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n class?: any;\r\n id?: string;\r\n name?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n required?: boolean;\r\n modelValue?: any;\r\n multiple?: boolean;\r\n size?: number;\r\n autofocus?: boolean;\r\n trailingIcon?: string;\r\n }>();\r\n const styles = tv({\r\n base: "h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 pr-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\r\n });\r\n\r\n const select = ref<HTMLSelectElement | null>(null);\r\n const emits = defineEmits<{\r\n "update:modelValue": [value: any];\r\n }>();\r\n\r\n const localModel = useVModel(props, "modelValue", emits);\r\n\r\n onMounted(() => {\r\n if (props.autofocus) {\r\n select.value?.focus();\r\n }\r\n });\r\n</script>\r\n',
1338
+ '<template>\n <div class="relative">\n <select\n :id="id"\n ref="select"\n v-model="localModel"\n :multiple="multiple"\n :name="name"\n :size="size"\n :placeholder="placeholder"\n :disabled="disabled"\n :required="required"\n :class="styles({ class: props.class })"\n >\n <slot />\n </select>\n <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center justify-center">\n <slot name="trailingIcon">\n <Icon\n :name="trailingIcon || \'lucide:chevrons-up-down\'"\n class="h-4 w-4 text-muted-foreground"\n />\n </slot>\n </span>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n id?: string;\n name?: string;\n placeholder?: string;\n disabled?: boolean;\n required?: boolean;\n modelValue?: any;\n multiple?: boolean;\n size?: number;\n autofocus?: boolean;\n trailingIcon?: string;\n }>();\n const styles = tv({\n base: "h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 pr-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n });\n\n const select = ref<HTMLSelectElement | null>(null);\n const emits = defineEmits<{\n "update:modelValue": [value: any];\n }>();\n\n const localModel = useVModel(props, "modelValue", emits);\n\n onMounted(() => {\n if (props.autofocus) {\n select.value?.focus();\n }\n });\n</script>\n',
1324
1339
  },
1325
1340
  ],
1326
1341
  utils: [],
@@ -1335,7 +1350,7 @@ export default [
1335
1350
  fileName: "Navbar.vue",
1336
1351
  dirPath: "components/UI",
1337
1352
  fileContent:
1338
- '<template>\n <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n class?: any;\n sticky?: boolean;\n }\n >(),\n {\n as: "header",\n }\n );\n\n const styles = tv({\n base: "z-20 border-b bg-background/90 backdrop-blur",\n variants: {\n sticky: {\n true: "sticky top-0",\n },\n },\n });\n</script>\n',
1353
+ '<template>\n <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n class?: any;\n sticky?: boolean;\n }\n >(),\n {\n as: "header",\n }\n );\n\n const styles = tv({\n base: "z-20 border-b bg-background/90 backdrop-blur",\n variants: {\n sticky: {\n true: "sticky top-0",\n },\n },\n });\n</script>\n',
1339
1354
  },
1340
1355
  ],
1341
1356
  utils: [],
@@ -1350,49 +1365,49 @@ export default [
1350
1365
  fileName: "NavigationMenu/Content.vue",
1351
1366
  dirPath: "components/UI",
1352
1367
  fileContent:
1353
- '<template>\n <NavigationMenuContent v-bind="forwarded" :class="styles({ class: props.class })">\n <slot/>\n </NavigationMenuContent>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuContent, useForwardPropsEmits } from "radix-vue";\n import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const emits = defineEmits<NavigationMenuContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",\n });\n</script>\n',
1368
+ '<template>\n <NavigationMenuContent v-bind="forwarded" :class="styles({ class: props.class })">\n <slot />\n </NavigationMenuContent>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuContent, useForwardPropsEmits } from "radix-vue";\n import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const emits = defineEmits<NavigationMenuContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",\n });\n</script>\n',
1354
1369
  },
1355
1370
  {
1356
1371
  fileName: "NavigationMenu/Indicator.vue",
1357
1372
  dirPath: "components/UI",
1358
1373
  fileContent:
1359
- '<template>\n <NavigationMenuIndicator\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ class: props.class })"\n >\n <slot/>\n <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />\n </NavigationMenuIndicator>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuIndicator } from "radix-vue";\n import type { NavigationMenuIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuIndicatorProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",\n });\n</script>\n',
1374
+ '<template>\n <NavigationMenuIndicator\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ class: props.class })"\n >\n <slot />\n <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />\n </NavigationMenuIndicator>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuIndicator } from "radix-vue";\n import type { NavigationMenuIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuIndicatorProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",\n });\n</script>\n',
1360
1375
  },
1361
1376
  {
1362
1377
  fileName: "NavigationMenu/Item.vue",
1363
1378
  dirPath: "components/UI",
1364
1379
  fileContent:
1365
- '<template>\n <NavigationMenuItem v-bind="props">\n <slot/>\n </NavigationMenuItem>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuItem } from "radix-vue";\n import type { NavigationMenuItemProps } from "radix-vue";\n\n const props = defineProps<NavigationMenuItemProps>();\n</script>\n',
1380
+ '<template>\n <NavigationMenuItem v-bind="props">\n <slot />\n </NavigationMenuItem>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuItem } from "radix-vue";\n import type { NavigationMenuItemProps } from "radix-vue";\n\n const props = defineProps<NavigationMenuItemProps>();\n</script>\n',
1366
1381
  },
1367
1382
  {
1368
1383
  fileName: "NavigationMenu/Link.vue",
1369
1384
  dirPath: "components/UI",
1370
1385
  fileContent:
1371
- '<template>\n <NavigationMenuLink v-bind="forwarded">\n <slot/>\n </NavigationMenuLink>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuLink, useForwardPropsEmits } from "radix-vue";\n import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "radix-vue";\n\n const props = defineProps<NavigationMenuLinkProps>();\n const emits = defineEmits<NavigationMenuLinkEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1386
+ '<template>\n <NavigationMenuLink v-bind="forwarded">\n <slot />\n </NavigationMenuLink>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuLink, useForwardPropsEmits } from "radix-vue";\n import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "radix-vue";\n\n const props = defineProps<NavigationMenuLinkProps>();\n const emits = defineEmits<NavigationMenuLinkEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1372
1387
  },
1373
1388
  {
1374
1389
  fileName: "NavigationMenu/List.vue",
1375
1390
  dirPath: "components/UI",
1376
1391
  fileContent:
1377
- '<template>\n <NavigationMenuList v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </NavigationMenuList>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuList } from "radix-vue";\n import type { NavigationMenuListProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuListProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "group flex flex-1 list-none items-center justify-center space-x-1",\n });\n</script>\n',
1392
+ '<template>\n <NavigationMenuList v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot />\n </NavigationMenuList>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuList } from "radix-vue";\n import type { NavigationMenuListProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuListProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "group flex flex-1 list-none items-center justify-center space-x-1",\n });\n</script>\n',
1378
1393
  },
1379
1394
  {
1380
1395
  fileName: "NavigationMenu/NavigationMenu.vue",
1381
1396
  dirPath: "components/UI",
1382
1397
  fileContent:
1383
- '<template>\r\n <NavigationMenuRoot :class="styles({ class: props.class })" v-bind="forwarded">\r\n <slot/>\r\n <slot name="viewport">\r\n <UiNavigationMenuViewport />\r\n </slot>\r\n </NavigationMenuRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { NavigationMenuRoot, useForwardPropsEmits } from "radix-vue";\r\n import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n NavigationMenuRootProps & {\r\n /** Custom class(es) to add to the parent */\r\n class?: any;\r\n }\r\n >();\r\n const emits = defineEmits<NavigationMenuRootEmits>();\r\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\r\n\r\n const styles = tv({\r\n base: "relative flex max-w-max flex-1 items-center justify-center",\r\n });\r\n</script>\r\n',
1398
+ '<template>\n <NavigationMenuRoot :class="styles({ class: props.class })" v-bind="forwarded">\n <slot />\n <slot name="viewport">\n <UiNavigationMenuViewport />\n </slot>\n </NavigationMenuRoot>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuRoot, useForwardPropsEmits } from "radix-vue";\n import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuRootProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const emits = defineEmits<NavigationMenuRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "relative flex max-w-max flex-1 items-center justify-center",\n });\n</script>\n',
1384
1399
  },
1385
1400
  {
1386
1401
  fileName: "NavigationMenu/Sub.vue",
1387
1402
  dirPath: "components/UI",
1388
1403
  fileContent:
1389
- '<template>\n <NavigationMenuSub v-bind="forwarded">\n <slot/>\n </NavigationMenuSub>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuSub, useForwardPropsEmits } from "radix-vue";\n import type { NavigationMenuSubEmits, NavigationMenuSubProps } from "radix-vue";\n\n const props = defineProps<NavigationMenuSubProps>();\n const emits = defineEmits<NavigationMenuSubEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1404
+ '<template>\n <NavigationMenuSub v-bind="forwarded">\n <slot />\n </NavigationMenuSub>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuSub, useForwardPropsEmits } from "radix-vue";\n import type { NavigationMenuSubEmits, NavigationMenuSubProps } from "radix-vue";\n\n const props = defineProps<NavigationMenuSubProps>();\n const emits = defineEmits<NavigationMenuSubEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1390
1405
  },
1391
1406
  {
1392
1407
  fileName: "NavigationMenu/Trigger.vue",
1393
1408
  dirPath: "components/UI",
1394
1409
  fileContent:
1395
- '<template>\r\n <NavigationMenuTrigger\r\n v-bind="reactiveOmit(props, \'class\', \'icon\', \'title\')"\r\n :class="styles({ class: props.class })"\r\n >\r\n <slot>{{ title }}</slot>\r\n <slot name="icon">\r\n <Icon\r\n :name="icon || \'lucide:chevron-down\'"\r\n class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"\r\n aria-hidden="true"\r\n />\r\n </slot>\r\n </NavigationMenuTrigger>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { NavigationMenuTrigger } from "radix-vue";\r\n import type { NavigationMenuTriggerProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n NavigationMenuTriggerProps & {\r\n /** Custom class(es) to add to the parent */\r\n class?: any;\r\n /** Icon to show */\r\n icon?: string;\r\n /** Title to show */\r\n title?: string;\r\n }\r\n >();\r\n\r\n const styles = tv({\r\n base: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",\r\n });\r\n</script>\r\n',
1410
+ '<template>\n <NavigationMenuTrigger\n v-bind="reactiveOmit(props, \'class\', \'icon\', \'title\')"\n :class="styles({ class: props.class })"\n >\n <slot>{{ title }}</slot>\n <slot name="icon">\n <Icon\n :name="icon || \'lucide:chevron-down\'"\n class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"\n aria-hidden="true"\n />\n </slot>\n </NavigationMenuTrigger>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuTrigger } from "radix-vue";\n import type { NavigationMenuTriggerProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuTriggerProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** Icon to show */\n icon?: string;\n /** Title to show */\n title?: string;\n }\n >();\n\n const styles = tv({\n base: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",\n });\n</script>\n',
1396
1411
  },
1397
1412
  {
1398
1413
  fileName: "NavigationMenu/Viewport.vue",
@@ -1437,7 +1452,7 @@ export default [
1437
1452
  fileName: "Pagination/List.vue",
1438
1453
  dirPath: "components/UI",
1439
1454
  fileContent:
1440
- '<template>\n <PaginationList\n v-slot="{ items }"\n :class="styles({ class: props.class })"\n v-bind="reactiveOmit(props, \'class\')"\n >\n <slot :items="items"/>\n </PaginationList>\n</template>\n\n<script lang="ts" setup>\n import { PaginationList } from "radix-vue";\n import type { PaginationListProps } from "radix-vue";\n\n const props = defineProps<\n PaginationListProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "flex items-center gap-1",\n });\n</script>\n',
1455
+ '<template>\n <PaginationList\n v-slot="{ items }"\n :class="styles({ class: props.class })"\n v-bind="reactiveOmit(props, \'class\')"\n >\n <slot :items="items" />\n </PaginationList>\n</template>\n\n<script lang="ts" setup>\n import { PaginationList } from "radix-vue";\n import type { PaginationListProps } from "radix-vue";\n\n const props = defineProps<\n PaginationListProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "flex items-center gap-1",\n });\n</script>\n',
1441
1456
  },
1442
1457
  {
1443
1458
  fileName: "Pagination/Next.vue",
@@ -1491,7 +1506,7 @@ export default [
1491
1506
  fileName: "Popover/Anchor.vue",
1492
1507
  dirPath: "components/UI",
1493
1508
  fileContent:
1494
- '<template>\n <PopoverAnchor v-bind="forwarded">\n <slot/>\n </PopoverAnchor>\n</template>\n\n<script lang="ts" setup>\n import { PopoverAnchor, useForwardProps } from "radix-vue";\n import type { PopoverAnchorProps } from "radix-vue";\n\n const props = defineProps<PopoverAnchorProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
1509
+ '<template>\n <PopoverAnchor v-bind="forwarded">\n <slot />\n </PopoverAnchor>\n</template>\n\n<script lang="ts" setup>\n import { PopoverAnchor, useForwardProps } from "radix-vue";\n import type { PopoverAnchorProps } from "radix-vue";\n\n const props = defineProps<PopoverAnchorProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
1495
1510
  },
1496
1511
  {
1497
1512
  fileName: "Popover/Arrow.vue",
@@ -1503,31 +1518,31 @@ export default [
1503
1518
  fileName: "Popover/Close.vue",
1504
1519
  dirPath: "components/UI",
1505
1520
  fileContent:
1506
- '<template>\n <PopoverClose v-bind="forwarded">\n <slot/>\n </PopoverClose>\n</template>\n\n<script lang="ts" setup>\n import { PopoverClose, useForwardProps } from "radix-vue";\n import type { PopoverCloseProps } from "radix-vue";\n\n const props = defineProps<PopoverCloseProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
1521
+ '<template>\n <PopoverClose v-bind="forwarded">\n <slot />\n </PopoverClose>\n</template>\n\n<script lang="ts" setup>\n import { PopoverClose, useForwardProps } from "radix-vue";\n import type { PopoverCloseProps } from "radix-vue";\n\n const props = defineProps<PopoverCloseProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
1507
1522
  },
1508
1523
  {
1509
1524
  fileName: "Popover/Content.vue",
1510
1525
  dirPath: "components/UI",
1511
1526
  fileContent:
1512
- '<template>\n <UiPopoverPortal :to="to">\n <PopoverContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot/>\n </PopoverContent>\n </UiPopoverPortal>\n</template>\n\n<script lang="ts" setup>\n import { PopoverContent, useForwardPropsEmits } from "radix-vue";\n import type { PopoverContentEmits, PopoverContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n PopoverContentProps & {\n to?: string | HTMLElement;\n class?: any;\n }\n >(),\n {\n side: "bottom",\n sideOffset: 8,\n align: "start",\n avoidCollisions: true,\n collisionPadding: 0,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<PopoverContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "to", "class"), emits);\n\n const styles = tv({\n base: "z-50 w-72 rounded-md border bg-popover p-4 text-accent-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
1527
+ '<template>\n <UiPopoverPortal :to="to">\n <PopoverContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot />\n </PopoverContent>\n </UiPopoverPortal>\n</template>\n\n<script lang="ts" setup>\n import { PopoverContent, useForwardPropsEmits } from "radix-vue";\n import type { PopoverContentEmits, PopoverContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n PopoverContentProps & {\n to?: string | HTMLElement;\n class?: any;\n }\n >(),\n {\n side: "bottom",\n sideOffset: 8,\n align: "start",\n avoidCollisions: true,\n collisionPadding: 0,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<PopoverContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "to", "class"), emits);\n\n const styles = tv({\n base: "z-50 w-72 rounded-md border bg-popover p-4 text-accent-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
1513
1528
  },
1514
1529
  {
1515
1530
  fileName: "Popover/Popover.vue",
1516
1531
  dirPath: "components/UI",
1517
1532
  fileContent:
1518
- '<template>\n <PopoverRoot v-bind="forwarded">\n <slot/>\n </PopoverRoot>\n</template>\n\n<script lang="ts" setup>\n import { PopoverRoot, useForwardPropsEmits } from "radix-vue";\n import type { PopoverRootEmits, PopoverRootProps } from "radix-vue";\n\n const props = defineProps<PopoverRootProps>();\n const emits = defineEmits<PopoverRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1533
+ '<template>\n <PopoverRoot v-bind="forwarded">\n <slot />\n </PopoverRoot>\n</template>\n\n<script lang="ts" setup>\n import { PopoverRoot, useForwardPropsEmits } from "radix-vue";\n import type { PopoverRootEmits, PopoverRootProps } from "radix-vue";\n\n const props = defineProps<PopoverRootProps>();\n const emits = defineEmits<PopoverRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1519
1534
  },
1520
1535
  {
1521
1536
  fileName: "Popover/Portal.vue",
1522
1537
  dirPath: "components/UI",
1523
1538
  fileContent:
1524
- '<template>\n <PopoverPortal v-bind="forwarded">\n <slot/>\n </PopoverPortal>\n</template>\n\n<script lang="ts" setup>\n import { PopoverPortal, useForwardProps } from "radix-vue";\n import type { PopoverPortalProps } from "radix-vue";\n\n const props = defineProps<PopoverPortalProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
1539
+ '<template>\n <PopoverPortal v-bind="forwarded">\n <slot />\n </PopoverPortal>\n</template>\n\n<script lang="ts" setup>\n import { PopoverPortal, useForwardProps } from "radix-vue";\n import type { PopoverPortalProps } from "radix-vue";\n\n const props = defineProps<PopoverPortalProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
1525
1540
  },
1526
1541
  {
1527
1542
  fileName: "Popover/Trigger.vue",
1528
1543
  dirPath: "components/UI",
1529
1544
  fileContent:
1530
- '<template>\n <PopoverTrigger v-bind="props">\n <slot/>\n </PopoverTrigger>\n</template>\n\n<script lang="ts" setup>\n import { PopoverTrigger } from "radix-vue";\n import type { PopoverTriggerProps } from "radix-vue";\n\n const props = defineProps<PopoverTriggerProps>();\n</script>\n',
1545
+ '<template>\n <PopoverTrigger v-bind="props">\n <slot />\n </PopoverTrigger>\n</template>\n\n<script lang="ts" setup>\n import { PopoverTrigger } from "radix-vue";\n import type { PopoverTriggerProps } from "radix-vue";\n\n const props = defineProps<PopoverTriggerProps>();\n</script>\n',
1531
1546
  },
1532
1547
  {
1533
1548
  fileName: "Popover/X.vue",
@@ -1548,7 +1563,7 @@ export default [
1548
1563
  fileName: "Progress/Indicator.vue",
1549
1564
  dirPath: "components/UI",
1550
1565
  fileContent:
1551
- '<template>\n <ProgressIndicator v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </ProgressIndicator>\n</template>\n\n<script lang="ts" setup>\n import { ProgressIndicator } from "radix-vue";\n import type { ProgressIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n ProgressIndicatorProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "h-full w-full flex-1 rounded-full bg-primary transition-all",\n });\n</script>\n',
1566
+ '<template>\n <ProgressIndicator v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot />\n </ProgressIndicator>\n</template>\n\n<script lang="ts" setup>\n import { ProgressIndicator } from "radix-vue";\n import type { ProgressIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n ProgressIndicatorProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "h-full w-full flex-1 rounded-full bg-primary transition-all",\n });\n</script>\n',
1552
1567
  },
1553
1568
  {
1554
1569
  fileName: "Progress/Progress.vue",
@@ -1581,7 +1596,7 @@ export default [
1581
1596
  fileName: "RadioGroup/RadioGroup.vue",
1582
1597
  dirPath: "components/UI",
1583
1598
  fileContent:
1584
- '<template>\n <RadioGroupRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot/>\n </RadioGroupRoot>\n</template>\n\n<script lang="ts" setup>\n import { RadioGroupRoot, useForwardPropsEmits } from "radix-vue";\n import type { RadioGroupRootEmits, RadioGroupRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n RadioGroupRootProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n orientation: "vertical",\n loop: true,\n }\n );\n\n const emits = defineEmits<RadioGroupRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({ base: "grid gap-3" });\n</script>\n',
1599
+ '<template>\n <RadioGroupRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot />\n </RadioGroupRoot>\n</template>\n\n<script lang="ts" setup>\n import { RadioGroupRoot, useForwardPropsEmits } from "radix-vue";\n import type { RadioGroupRootEmits, RadioGroupRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n RadioGroupRootProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n orientation: "vertical",\n loop: true,\n }\n );\n\n const emits = defineEmits<RadioGroupRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({ base: "grid gap-3" });\n</script>\n',
1585
1600
  },
1586
1601
  ],
1587
1602
  utils: [],
@@ -1596,31 +1611,31 @@ export default [
1596
1611
  fileName: "ScrollArea/Corner.vue",
1597
1612
  dirPath: "components/UI",
1598
1613
  fileContent:
1599
- '<template>\n <ScrollAreaCorner v-bind="props">\n <slot/>\n </ScrollAreaCorner>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaCorner } from "radix-vue";\n import type { ScrollAreaCornerProps } from "radix-vue";\n\n const props = defineProps<ScrollAreaCornerProps>();\n</script>\n',
1614
+ '<template>\n <ScrollAreaCorner v-bind="props">\n <slot />\n </ScrollAreaCorner>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaCorner } from "radix-vue";\n import type { ScrollAreaCornerProps } from "radix-vue";\n\n const props = defineProps<ScrollAreaCornerProps>();\n</script>\n',
1600
1615
  },
1601
1616
  {
1602
1617
  fileName: "ScrollArea/ScrollArea.vue",
1603
1618
  dirPath: "components/UI",
1604
1619
  fileContent:
1605
- '<template>\n <ScrollAreaRoot v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <UiScrollAreaViewport>\n <slot/>\n </UiScrollAreaViewport>\n <UiScrollAreaScrollbar :orientation="orientation" />\n <UiScrollAreaCorner />\n </ScrollAreaRoot>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaRoot } from "radix-vue";\n import type { ScrollAreaRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ScrollAreaRootProps & {\n /** Orientation for scrolling */\n orientation?: "vertical" | "horizontal";\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n orientation: "vertical",\n }\n );\n\n const styles = tv({\n base: "relative overflow-hidden",\n });\n</script>\n',
1620
+ '<template>\n <ScrollAreaRoot v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <UiScrollAreaViewport>\n <slot />\n </UiScrollAreaViewport>\n <UiScrollAreaScrollbar :orientation="orientation" />\n <UiScrollAreaCorner />\n </ScrollAreaRoot>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaRoot } from "radix-vue";\n import type { ScrollAreaRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ScrollAreaRootProps & {\n /** Orientation for scrolling */\n orientation?: "vertical" | "horizontal";\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n orientation: "vertical",\n }\n );\n\n const styles = tv({\n base: "relative overflow-hidden",\n });\n</script>\n',
1606
1621
  },
1607
1622
  {
1608
1623
  fileName: "ScrollArea/Scrollbar.vue",
1609
1624
  dirPath: "components/UI",
1610
1625
  fileContent:
1611
- '<template>\n <ScrollAreaScrollbar\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ orientation, class: props.class })"\n >\n <slot/>\n <UiScrollAreaThumb />\n </ScrollAreaScrollbar>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaScrollbar } from "radix-vue";\n import type { ScrollAreaScrollbarProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ScrollAreaScrollbarProps & {\n /** Class to apply to the scrollbar */\n class?: any;\n }\n >(),\n {\n orientation: "vertical",\n }\n );\n\n const styles = tv({\n base: "flex touch-none select-none transition-colors",\n variants: {\n orientation: {\n vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",\n horizontal: "h-2.5 border-t border-t-transparent p-[1px]",\n },\n },\n });\n</script>\n',
1626
+ '<template>\n <ScrollAreaScrollbar\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ orientation, class: props.class })"\n >\n <slot />\n <UiScrollAreaThumb />\n </ScrollAreaScrollbar>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaScrollbar } from "radix-vue";\n import type { ScrollAreaScrollbarProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ScrollAreaScrollbarProps & {\n /** Class to apply to the scrollbar */\n class?: any;\n }\n >(),\n {\n orientation: "vertical",\n }\n );\n\n const styles = tv({\n base: "flex touch-none select-none transition-colors",\n variants: {\n orientation: {\n vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",\n horizontal: "h-2.5 border-t border-t-transparent p-[1px]",\n },\n },\n });\n</script>\n',
1612
1627
  },
1613
1628
  {
1614
1629
  fileName: "ScrollArea/Thumb.vue",
1615
1630
  dirPath: "components/UI",
1616
1631
  fileContent:
1617
- '<template>\n <ScrollAreaThumb\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ orientation, class: props.class })"\n >\n <slot/>\n </ScrollAreaThumb>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaThumb } from "radix-vue";\n import type { ScrollAreaThumbProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ScrollAreaThumbProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n orientation?: "vertical" | "horizontal";\n }\n >(),\n {\n orientation: "vertical",\n }\n );\n\n const styles = tv({\n base: "relative flex-1 rounded-full bg-border",\n variants: {\n orientation: {\n vertical: "flex-1",\n horizontal: "",\n },\n },\n });\n</script>\n',
1632
+ '<template>\n <ScrollAreaThumb\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ orientation, class: props.class })"\n >\n <slot />\n </ScrollAreaThumb>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaThumb } from "radix-vue";\n import type { ScrollAreaThumbProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ScrollAreaThumbProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n orientation?: "vertical" | "horizontal";\n }\n >(),\n {\n orientation: "vertical",\n }\n );\n\n const styles = tv({\n base: "relative flex-1 rounded-full bg-border",\n variants: {\n orientation: {\n vertical: "flex-1",\n horizontal: "",\n },\n },\n });\n</script>\n',
1618
1633
  },
1619
1634
  {
1620
1635
  fileName: "ScrollArea/Viewport.vue",
1621
1636
  dirPath: "components/UI",
1622
1637
  fileContent:
1623
- '<template>\n <ScrollAreaViewport v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </ScrollAreaViewport>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaViewport } from "radix-vue";\n import type { ScrollAreaViewportProps } from "radix-vue";\n\n const props = defineProps<\n ScrollAreaViewportProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "h-full w-full rounded-[inherit]",\n });\n</script>\n',
1638
+ '<template>\n <ScrollAreaViewport v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot />\n </ScrollAreaViewport>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaViewport } from "radix-vue";\n import type { ScrollAreaViewportProps } from "radix-vue";\n\n const props = defineProps<\n ScrollAreaViewportProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "h-full w-full rounded-[inherit]",\n });\n</script>\n',
1624
1639
  },
1625
1640
  ],
1626
1641
  utils: [],
@@ -1641,13 +1656,13 @@ export default [
1641
1656
  fileName: "Select/Content.vue",
1642
1657
  dirPath: "components/UI",
1643
1658
  fileContent:
1644
- '<template>\n <UiSelectPortal :to="to">\n <SelectContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ position, class: props.class })"\n >\n <UiSelectScrollUpButton />\n <UiSelectViewport :position="position">\n <slot/>\n </UiSelectViewport>\n <UiSelectScrollDownButton />\n </SelectContent>\n </UiSelectPortal>\n</template>\n\n<script lang="ts" setup>\n import { SelectContent, useForwardPropsEmits } from "radix-vue";\n import type { SelectContentEmits, SelectContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n SelectContentProps & {\n /** Where to render the portal */\n to?: string | HTMLElement;\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n position: "popper",\n side: "bottom",\n align: "start",\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<SelectContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-accent-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n variants: {\n position: {\n popper:\n "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",\n "item-aligned": "",\n },\n },\n });\n</script>\n',
1659
+ '<template>\n <UiSelectPortal :to="to">\n <SelectContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ position, class: props.class })"\n >\n <UiSelectScrollUpButton />\n <UiSelectViewport :position="position">\n <slot />\n </UiSelectViewport>\n <UiSelectScrollDownButton />\n </SelectContent>\n </UiSelectPortal>\n</template>\n\n<script lang="ts" setup>\n import { SelectContent, useForwardPropsEmits } from "radix-vue";\n import type { SelectContentEmits, SelectContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n SelectContentProps & {\n /** Where to render the portal */\n to?: string | HTMLElement;\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n position: "popper",\n side: "bottom",\n align: "start",\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<SelectContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-accent-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n variants: {\n position: {\n popper:\n "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",\n "item-aligned": "",\n },\n },\n });\n</script>\n',
1645
1660
  },
1646
1661
  {
1647
1662
  fileName: "Select/Group.vue",
1648
1663
  dirPath: "components/UI",
1649
1664
  fileContent:
1650
- '<template>\n <SelectGroup v-bind="forwarded">\n <slot/>\n </SelectGroup>\n</template>\n\n<script lang="ts" setup>\n import { SelectGroup, useForwardProps } from "radix-vue";\n import type { SelectGroupProps } from "radix-vue";\n\n const props = defineProps<SelectGroupProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
1665
+ '<template>\n <SelectGroup v-bind="forwarded">\n <slot />\n </SelectGroup>\n</template>\n\n<script lang="ts" setup>\n import { SelectGroup, useForwardProps } from "radix-vue";\n import type { SelectGroupProps } from "radix-vue";\n\n const props = defineProps<SelectGroupProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
1651
1666
  },
1652
1667
  {
1653
1668
  fileName: "Select/Icon.vue",
@@ -1671,19 +1686,19 @@ export default [
1671
1686
  fileName: "Select/ItemText.vue",
1672
1687
  dirPath: "components/UI",
1673
1688
  fileContent:
1674
- '<template>\n <SelectItemText v-bind="props">\n <slot/>\n </SelectItemText>\n</template>\n\n<script lang="ts" setup>\n import { SelectItemText } from "radix-vue";\n import type { SelectItemTextProps } from "radix-vue";\n\n const props = defineProps<SelectItemTextProps>();\n</script>\n',
1689
+ '<template>\n <SelectItemText v-bind="props">\n <slot />\n </SelectItemText>\n</template>\n\n<script lang="ts" setup>\n import { SelectItemText } from "radix-vue";\n import type { SelectItemTextProps } from "radix-vue";\n\n const props = defineProps<SelectItemTextProps>();\n</script>\n',
1675
1690
  },
1676
1691
  {
1677
1692
  fileName: "Select/Label.vue",
1678
1693
  dirPath: "components/UI",
1679
1694
  fileContent:
1680
- '<template>\n <SelectLabel :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </SelectLabel>\n</template>\n\n<script lang="ts" setup>\n import { SelectLabel } from "radix-vue";\n import type { SelectLabelProps } from "radix-vue";\n\n const props = defineProps<\n SelectLabelProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "py-1.5 pl-8 pr-2 text-sm font-semibold",\n });\n</script>\n',
1695
+ '<template>\n <SelectLabel :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </SelectLabel>\n</template>\n\n<script lang="ts" setup>\n import { SelectLabel } from "radix-vue";\n import type { SelectLabelProps } from "radix-vue";\n\n const props = defineProps<\n SelectLabelProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "py-1.5 pl-8 pr-2 text-sm font-semibold",\n });\n</script>\n',
1681
1696
  },
1682
1697
  {
1683
1698
  fileName: "Select/Portal.vue",
1684
1699
  dirPath: "components/UI",
1685
1700
  fileContent:
1686
- '<template>\n <SelectPortal v-bind="props">\n <slot/>\n </SelectPortal>\n</template>\n\n<script lang="ts" setup>\n import { SelectPortal } from "radix-vue";\n import type { SelectPortalProps } from "radix-vue";\n\n const props = defineProps<SelectPortalProps>();\n</script>\n',
1701
+ '<template>\n <SelectPortal v-bind="props">\n <slot />\n </SelectPortal>\n</template>\n\n<script lang="ts" setup>\n import { SelectPortal } from "radix-vue";\n import type { SelectPortalProps } from "radix-vue";\n\n const props = defineProps<SelectPortalProps>();\n</script>\n',
1687
1702
  },
1688
1703
  {
1689
1704
  fileName: "Select/ScrollDownButton.vue",
@@ -1701,7 +1716,7 @@ export default [
1701
1716
  fileName: "Select/Select.vue",
1702
1717
  dirPath: "components/UI",
1703
1718
  fileContent:
1704
- '<template>\n <SelectRoot v-bind="forwarded">\n <slot/>\n </SelectRoot>\n</template>\n\n<script lang="ts" setup>\n import { SelectRoot, useForwardPropsEmits } from "radix-vue";\n import type { SelectRootEmits, SelectRootProps } from "radix-vue";\n\n const props = defineProps<SelectRootProps>();\n\n const emits = defineEmits<SelectRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1719
+ '<template>\n <SelectRoot v-bind="forwarded">\n <slot />\n </SelectRoot>\n</template>\n\n<script lang="ts" setup>\n import { SelectRoot, useForwardPropsEmits } from "radix-vue";\n import type { SelectRootEmits, SelectRootProps } from "radix-vue";\n\n const props = defineProps<SelectRootProps>();\n\n const emits = defineEmits<SelectRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
1705
1720
  },
1706
1721
  {
1707
1722
  fileName: "Select/Separator.vue",
@@ -1719,13 +1734,13 @@ export default [
1719
1734
  fileName: "Select/Value.vue",
1720
1735
  dirPath: "components/UI",
1721
1736
  fileContent:
1722
- '<template>\n <SelectValue v-bind="props">\n <slot/>\n </SelectValue>\n</template>\n\n<script lang="ts" setup>\n import { SelectValue } from "radix-vue";\n import type { SelectValueProps } from "radix-vue";\n\n const props = defineProps<SelectValueProps>();\n</script>\n',
1737
+ '<template>\n <SelectValue v-bind="props">\n <slot />\n </SelectValue>\n</template>\n\n<script lang="ts" setup>\n import { SelectValue } from "radix-vue";\n import type { SelectValueProps } from "radix-vue";\n\n const props = defineProps<SelectValueProps>();\n</script>\n',
1723
1738
  },
1724
1739
  {
1725
1740
  fileName: "Select/Viewport.vue",
1726
1741
  dirPath: "components/UI",
1727
1742
  fileContent:
1728
- '<template>\n <SelectViewport\n :class="styles({ position, class: props.class })"\n v-bind="reactiveOmit(props, \'class\')"\n >\n <slot/>\n </SelectViewport>\n</template>\n\n<script lang="ts" setup>\n import { SelectViewport } from "radix-vue";\n import type { SelectViewportProps } from "radix-vue";\n\n const props = defineProps<\n SelectViewportProps & {\n position?: "item-aligned" | "popper";\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "p-1",\n variants: {\n position: {\n popper:\n "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",\n "item-aligned": "",\n },\n },\n });\n</script>\n',
1743
+ '<template>\n <SelectViewport\n :class="styles({ position, class: props.class })"\n v-bind="reactiveOmit(props, \'class\')"\n >\n <slot />\n </SelectViewport>\n</template>\n\n<script lang="ts" setup>\n import { SelectViewport } from "radix-vue";\n import type { SelectViewportProps } from "radix-vue";\n\n const props = defineProps<\n SelectViewportProps & {\n position?: "item-aligned" | "popper";\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "p-1",\n variants: {\n position: {\n popper:\n "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",\n "item-aligned": "",\n },\n },\n });\n</script>\n',
1729
1744
  },
1730
1745
  ],
1731
1746
  utils: [],
@@ -1755,13 +1770,13 @@ export default [
1755
1770
  fileName: "Sheet/Close.vue",
1756
1771
  dirPath: "components/UI",
1757
1772
  fileContent:
1758
- '<template>\n <DialogClose v-bind="props">\n <slot/>\n </DialogClose>\n</template>\n\n<script lang="ts" setup>\n import { DialogClose } from "radix-vue";\n import type { DialogCloseProps } from "radix-vue";\n\n const props = defineProps<DialogCloseProps>();\n</script>\n',
1773
+ '<template>\n <DialogClose v-bind="props">\n <slot />\n </DialogClose>\n</template>\n\n<script lang="ts" setup>\n import { DialogClose } from "radix-vue";\n import type { DialogCloseProps } from "radix-vue";\n\n const props = defineProps<DialogCloseProps>();\n</script>\n',
1759
1774
  },
1760
1775
  {
1761
1776
  fileName: "Sheet/Content.vue",
1762
1777
  dirPath: "components/UI",
1763
1778
  fileContent:
1764
- '<template>\n <UiSheetPortal :to="to">\n <slot name="overlay">\n <UiSheetOverlay />\n </slot>\n <DialogContent\n :class="styles({ side, class: props.class })"\n v-bind="{ ...forwarded, ...$attrs }"\n >\n <slot>\n <slot name="header">\n <UiSheetHeader>\n <slot name="title">\n <UiSheetTitle v-if="title" :title="title" />\n </slot>\n <slot name="description">\n <UiSheetDescription v-if="description" :description="description" />\n </slot>\n </UiSheetHeader>\n </slot>\n <slot name="content"/>\n <slot name="footer"/>\n </slot>\n <slot name="close">\n <UiSheetClose :icon="icon" />\n </slot>\n </DialogContent>\n </UiSheetPortal>\n</template>\n\n<script lang="ts" setup>\n import { DialogContent, useForwardPropsEmits } from "radix-vue";\n import type { DialogContentEmits, DialogContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<\n DialogContentProps & {\n icon?: string;\n title?: string;\n description?: string;\n class?: any;\n side?: VariantProps<typeof styles>["side"];\n to?: string | HTMLElement;\n }\n >();\n const emits = defineEmits<DialogContentEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "icon", "title", "description", "class", "to", "side"),\n emits\n );\n\n const styles = tv({\n base: "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",\n variants: {\n side: {\n top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",\n bottom:\n "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",\n left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",\n right:\n "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",\n },\n },\n defaultVariants: {\n side: "left",\n },\n });\n</script>\n',
1779
+ '<template>\n <UiSheetPortal :to="to">\n <slot name="overlay">\n <UiSheetOverlay />\n </slot>\n <DialogContent\n :class="styles({ side, class: props.class })"\n v-bind="{ ...forwarded, ...$attrs }"\n >\n <slot>\n <slot name="header">\n <UiSheetHeader>\n <slot name="title">\n <UiSheetTitle v-if="title" :title="title" />\n </slot>\n <slot name="description">\n <UiSheetDescription v-if="description" :description="description" />\n </slot>\n </UiSheetHeader>\n </slot>\n <slot name="content" />\n <slot name="footer" />\n </slot>\n <slot name="close">\n <UiSheetClose :icon="icon" />\n </slot>\n </DialogContent>\n </UiSheetPortal>\n</template>\n\n<script lang="ts" setup>\n import { DialogContent, useForwardPropsEmits } from "radix-vue";\n import type { DialogContentEmits, DialogContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<\n DialogContentProps & {\n icon?: string;\n title?: string;\n description?: string;\n class?: any;\n side?: VariantProps<typeof styles>["side"];\n to?: string | HTMLElement;\n }\n >();\n const emits = defineEmits<DialogContentEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "icon", "title", "description", "class", "to", "side"),\n emits\n );\n\n const styles = tv({\n base: "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",\n variants: {\n side: {\n top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",\n bottom:\n "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",\n left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",\n right:\n "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",\n },\n },\n defaultVariants: {\n side: "left",\n },\n });\n</script>\n',
1765
1780
  },
1766
1781
  {
1767
1782
  fileName: "Sheet/Description.vue",
@@ -1773,13 +1788,13 @@ export default [
1773
1788
  fileName: "Sheet/Footer.vue",
1774
1789
  dirPath: "components/UI",
1775
1790
  fileContent:
1776
- '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n });\n</script>\n',
1791
+ '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n });\n</script>\n',
1777
1792
  },
1778
1793
  {
1779
1794
  fileName: "Sheet/Header.vue",
1780
1795
  dirPath: "components/UI",
1781
1796
  fileContent:
1782
- '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col space-y-2 text-center sm:text-left",\n });\n</script>\n',
1797
+ '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col space-y-2 text-center sm:text-left",\n });\n</script>\n',
1783
1798
  },
1784
1799
  {
1785
1800
  fileName: "Sheet/Overlay.vue",
@@ -1791,13 +1806,13 @@ export default [
1791
1806
  fileName: "Sheet/Portal.vue",
1792
1807
  dirPath: "components/UI",
1793
1808
  fileContent:
1794
- '<template>\n <DialogPortal v-bind="props">\n <slot/>\n </DialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { DialogPortal } from "radix-vue";\n import type { DialogPortalProps } from "radix-vue";\n\n const props = defineProps<DialogPortalProps>();\n</script>\n',
1809
+ '<template>\n <DialogPortal v-bind="props">\n <slot />\n </DialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { DialogPortal } from "radix-vue";\n import type { DialogPortalProps } from "radix-vue";\n\n const props = defineProps<DialogPortalProps>();\n</script>\n',
1795
1810
  },
1796
1811
  {
1797
1812
  fileName: "Sheet/Sheet.vue",
1798
1813
  dirPath: "components/UI",
1799
1814
  fileContent:
1800
- '<template>\n <DialogRoot v-bind="forwarded">\n <slot/>\n </DialogRoot>\n</template>\n\n<script lang="ts" setup>\n import { DialogRoot, useForwardPropsEmits } from "radix-vue";\n import type { DialogRootEmits, DialogRootProps } from "radix-vue";\n\n const props = defineProps<DialogRootProps>();\n const emit = defineEmits<DialogRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
1815
+ '<template>\n <DialogRoot v-bind="forwarded">\n <slot />\n </DialogRoot>\n</template>\n\n<script lang="ts" setup>\n import { DialogRoot, useForwardPropsEmits } from "radix-vue";\n import type { DialogRootEmits, DialogRootProps } from "radix-vue";\n\n const props = defineProps<DialogRootProps>();\n const emit = defineEmits<DialogRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
1801
1816
  },
1802
1817
  {
1803
1818
  fileName: "Sheet/Title.vue",
@@ -1809,7 +1824,7 @@ export default [
1809
1824
  fileName: "Sheet/Trigger.vue",
1810
1825
  dirPath: "components/UI",
1811
1826
  fileContent:
1812
- '<template>\n <DialogTrigger v-bind="props">\n <slot/>\n </DialogTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DialogTrigger } from "radix-vue";\n import type { DialogTriggerProps } from "radix-vue";\n\n const props = defineProps<DialogTriggerProps>();\n</script>\n',
1827
+ '<template>\n <DialogTrigger v-bind="props">\n <slot />\n </DialogTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DialogTrigger } from "radix-vue";\n import type { DialogTriggerProps } from "radix-vue";\n\n const props = defineProps<DialogTriggerProps>();\n</script>\n',
1813
1828
  },
1814
1829
  {
1815
1830
  fileName: "Sheet/X.vue",
@@ -1830,7 +1845,7 @@ export default [
1830
1845
  fileName: "Skeleton.vue",
1831
1846
  dirPath: "components/UI",
1832
1847
  fileContent:
1833
- '<template>\n <Primitive\n :class="styles({ loading, class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'loading\')"\n >\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const styles = tv({\n base: "animate-pulse rounded-md bg-muted",\n variants: {\n loading: { true: "cursor-wait", false: "cursor-default" },\n },\n });\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n /** Whether the skeleton is loading */\n loading?: boolean;\n }\n >(),\n {\n as: "div",\n }\n );\n</script>\n',
1848
+ '<template>\n <Primitive\n :class="styles({ loading, class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'loading\')"\n >\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const styles = tv({\n base: "animate-pulse rounded-md bg-muted",\n variants: {\n loading: { true: "cursor-wait", false: "cursor-default" },\n },\n });\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n /** Whether the skeleton is loading */\n loading?: boolean;\n }\n >(),\n {\n as: "div",\n }\n );\n</script>\n',
1834
1849
  },
1835
1850
  ],
1836
1851
  utils: [],
@@ -1845,7 +1860,7 @@ export default [
1845
1860
  fileName: "Slider/Range.vue",
1846
1861
  dirPath: "components/UI",
1847
1862
  fileContent:
1848
- '<template>\n <SliderRange :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </SliderRange>\n</template>\n\n<script lang="ts" setup>\n import { SliderRange } from "radix-vue";\n import type { SliderRangeProps } from "radix-vue";\n\n const props = defineProps<\n SliderRangeProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n const styles = tv({\n base: "absolute h-full bg-primary",\n });\n</script>\n',
1863
+ '<template>\n <SliderRange :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </SliderRange>\n</template>\n\n<script lang="ts" setup>\n import { SliderRange } from "radix-vue";\n import type { SliderRangeProps } from "radix-vue";\n\n const props = defineProps<\n SliderRangeProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n const styles = tv({\n base: "absolute h-full bg-primary",\n });\n</script>\n',
1849
1864
  },
1850
1865
  {
1851
1866
  fileName: "Slider/Slider.vue",
@@ -1857,13 +1872,13 @@ export default [
1857
1872
  fileName: "Slider/Thumb.vue",
1858
1873
  dirPath: "components/UI",
1859
1874
  fileContent:
1860
- '<template>\n <SliderThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </SliderThumb>\n</template>\n\n<script lang="ts" setup>\n import { SliderThumb } from "radix-vue";\n import type { SliderThumbProps } from "radix-vue";\n\n const props = defineProps<\n SliderThumbProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",\n });\n</script>\n',
1875
+ '<template>\n <SliderThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </SliderThumb>\n</template>\n\n<script lang="ts" setup>\n import { SliderThumb } from "radix-vue";\n import type { SliderThumbProps } from "radix-vue";\n\n const props = defineProps<\n SliderThumbProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",\n });\n</script>\n',
1861
1876
  },
1862
1877
  {
1863
1878
  fileName: "Slider/Track.vue",
1864
1879
  dirPath: "components/UI",
1865
1880
  fileContent:
1866
- '<template>\n <SliderTrack :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </SliderTrack>\n</template>\n\n<script lang="ts" setup>\n import { SliderTrack } from "radix-vue";\n import type { SliderTrackProps } from "radix-vue";\n\n const props = defineProps<\n SliderTrackProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary",\n });\n</script>\n',
1881
+ '<template>\n <SliderTrack :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </SliderTrack>\n</template>\n\n<script lang="ts" setup>\n import { SliderTrack } from "radix-vue";\n import type { SliderTrackProps } from "radix-vue";\n\n const props = defineProps<\n SliderTrackProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary",\n });\n</script>\n',
1867
1882
  },
1868
1883
  ],
1869
1884
  utils: [],
@@ -1878,13 +1893,13 @@ export default [
1878
1893
  fileName: "Splitter/Splitter.vue",
1879
1894
  dirPath: "components/UI",
1880
1895
  fileContent:
1881
- '<template>\n <SplitterGroup\n v-slot="{ layout }: { layout: number[] }"\n v-bind="forwarded"\n :class="styles({ class: props.class })"\n >\n <slot :layout="layout"/>\n </SplitterGroup>\n</template>\n\n<script lang="ts" setup>\n import { SplitterGroup, useForwardPropsEmits } from "radix-vue";\n import type { SplitterGroupEmits, SplitterGroupProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n SplitterGroupProps & {\n direction?: "horizontal" | "vertical";\n class?: any;\n }\n >(),\n {\n direction: "horizontal",\n as: "div",\n keyboardResizeBy: 10,\n }\n );\n\n const emit = defineEmits<SplitterGroupEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emit);\n\n const styles = tv({\n base: "flex h-full w-full data-[orientation=vertical]:flex-col",\n });\n</script>\n',
1896
+ '<template>\n <SplitterGroup\n v-slot="{ layout }: { layout: number[] }"\n v-bind="forwarded"\n :class="styles({ class: props.class })"\n >\n <slot :layout="layout" />\n </SplitterGroup>\n</template>\n\n<script lang="ts" setup>\n import { SplitterGroup, useForwardPropsEmits } from "radix-vue";\n import type { SplitterGroupEmits, SplitterGroupProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n SplitterGroupProps & {\n direction?: "horizontal" | "vertical";\n class?: any;\n }\n >(),\n {\n direction: "horizontal",\n as: "div",\n keyboardResizeBy: 10,\n }\n );\n\n const emit = defineEmits<SplitterGroupEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emit);\n\n const styles = tv({\n base: "flex h-full w-full data-[orientation=vertical]:flex-col",\n });\n</script>\n',
1882
1897
  },
1883
1898
  {
1884
1899
  fileName: "Splitter/Panel.vue",
1885
1900
  dirPath: "components/UI",
1886
1901
  fileContent:
1887
- '<template>\r\n <SplitterPanel\r\n v-bind="forwarded"\r\n ref="forwardRef"\r\n v-slot="{ isCollapsed, isExpanded }: { isCollapsed: boolean; isExpanded: boolean }"\r\n >\r\n <slot :is-collapsed="isCollapsed" :is-expanded="isExpanded" />\r\n </SplitterPanel>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { SplitterPanel, useForwardPropsEmits } from "radix-vue";\r\n import type { SplitterPanelEmits, SplitterPanelProps } from "radix-vue";\r\n\r\n const props = withDefaults(defineProps<SplitterPanelProps>(), {});\r\n\r\n const forwardRef = ref<InstanceType<typeof SplitterPanel>>();\r\n const emit = defineEmits<\r\n SplitterPanelEmits & {\r\n ready: [value: InstanceType<typeof SplitterPanel>];\r\n }\r\n >();\r\n\r\n const forwarded = useForwardPropsEmits(props, emit);\r\n\r\n onMounted(async () => {\r\n await nextTick();\r\n emit("ready", forwardRef.value!);\r\n });\r\n</script>\r\n',
1902
+ '<template>\n <SplitterPanel\n v-bind="forwarded"\n ref="forwardRef"\n v-slot="{ isCollapsed, isExpanded }: { isCollapsed: boolean; isExpanded: boolean }"\n >\n <slot :is-collapsed="isCollapsed" :is-expanded="isExpanded" />\n </SplitterPanel>\n</template>\n\n<script lang="ts" setup>\n import { SplitterPanel, useForwardPropsEmits } from "radix-vue";\n import type { SplitterPanelEmits, SplitterPanelProps } from "radix-vue";\n\n const props = withDefaults(defineProps<SplitterPanelProps>(), {});\n\n const forwardRef = ref<InstanceType<typeof SplitterPanel>>();\n const emit = defineEmits<\n SplitterPanelEmits & {\n ready: [value: InstanceType<typeof SplitterPanel>];\n }\n >();\n\n const forwarded = useForwardPropsEmits(props, emit);\n\n onMounted(async () => {\n await nextTick();\n emit("ready", forwardRef.value!);\n });\n</script>\n',
1888
1903
  },
1889
1904
  {
1890
1905
  fileName: "Splitter/Handle.vue",
@@ -1905,13 +1920,13 @@ export default [
1905
1920
  fileName: "Switch/Switch.vue",
1906
1921
  dirPath: "components/UI",
1907
1922
  fileContent:
1908
- '<template>\n <SwitchRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <UiSwitchThumb>\n <slot/>\n </UiSwitchThumb>\n </SwitchRoot>\n</template>\n\n<script lang="ts" setup>\n import { SwitchRoot, useForwardPropsEmits } from "radix-vue";\n import type { SwitchRootEmits, SwitchRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n SwitchRootProps & {\n class?: any;\n id?: any;\n }\n >(),\n {\n as: "button",\n }\n );\n const emits = defineEmits<SwitchRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",\n });\n</script>\n',
1923
+ '<template>\n <SwitchRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <UiSwitchThumb>\n <slot />\n </UiSwitchThumb>\n </SwitchRoot>\n</template>\n\n<script lang="ts" setup>\n import { SwitchRoot, useForwardPropsEmits } from "radix-vue";\n import type { SwitchRootEmits, SwitchRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n SwitchRootProps & {\n class?: any;\n id?: any;\n }\n >(),\n {\n as: "button",\n }\n );\n const emits = defineEmits<SwitchRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",\n });\n</script>\n',
1909
1924
  },
1910
1925
  {
1911
1926
  fileName: "Switch/Thumb.vue",
1912
1927
  dirPath: "components/UI",
1913
1928
  fileContent:
1914
- '<template>\n <SwitchThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </SwitchThumb>\n</template>\n\n<script lang="ts" setup>\n import { SwitchThumb } from "radix-vue";\n import type { SwitchThumbProps } from "radix-vue";\n\n const props = defineProps<\n SwitchThumbProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",\n });\n</script>\n',
1929
+ '<template>\n <SwitchThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </SwitchThumb>\n</template>\n\n<script lang="ts" setup>\n import { SwitchThumb } from "radix-vue";\n import type { SwitchThumbProps } from "radix-vue";\n\n const props = defineProps<\n SwitchThumbProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",\n });\n</script>\n',
1915
1930
  },
1916
1931
  ],
1917
1932
  utils: [],
@@ -1926,55 +1941,55 @@ export default [
1926
1941
  fileName: "Table/Body.vue",
1927
1942
  dirPath: "components/UI",
1928
1943
  fileContent:
1929
- '<template>\n <tbody :class="styles({ class: props.class })">\n <slot/>\n </tbody>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "[&_tr:last-child]:border-0",\n });\n</script>\n',
1944
+ '<template>\n <tbody :class="styles({ class: props.class })">\n <slot />\n </tbody>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "[&_tr:last-child]:border-0",\n });\n</script>\n',
1930
1945
  },
1931
1946
  {
1932
1947
  fileName: "Table/Caption.vue",
1933
1948
  dirPath: "components/UI",
1934
1949
  fileContent:
1935
- '<template>\n <caption :class="styles({ class: props.class })">\n <slot/>\n </caption>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "mt-4 text-sm text-muted-foreground",\n });\n</script>\n',
1950
+ '<template>\n <caption :class="styles({ class: props.class })">\n <slot />\n </caption>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "mt-4 text-sm text-muted-foreground",\n });\n</script>\n',
1936
1951
  },
1937
1952
  {
1938
1953
  fileName: "Table/Cell.vue",
1939
1954
  dirPath: "components/UI",
1940
1955
  fileContent:
1941
- '<template>\n <td :class="styles({ class: props.class })">\n <slot/>\n </td>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "whitespace-nowrap p-4 align-middle",\n });\n</script>\n',
1956
+ '<template>\n <td :class="styles({ class: props.class })">\n <slot />\n </td>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "whitespace-nowrap p-4 align-middle",\n });\n</script>\n',
1942
1957
  },
1943
1958
  {
1944
1959
  fileName: "Table/Empty.vue",
1945
1960
  dirPath: "components/UI",
1946
1961
  fileContent:
1947
- '<template>\n <UiTableRow>\n <UiTableCell :colspan="colspan" :class="styles({ class: props.class })">\n <slot/>\n </UiTableCell>\n </UiTableRow>\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n colspan?: number;\n class?: any;\n }>(),\n {\n colspan: 1,\n }\n );\n\n const styles = tv({\n base: "whitespace-nowrap p-4 align-middle text-sm text-foreground",\n });\n</script>\n',
1962
+ '<template>\n <UiTableRow>\n <UiTableCell :colspan="colspan" :class="styles({ class: props.class })">\n <slot />\n </UiTableCell>\n </UiTableRow>\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n colspan?: number;\n class?: any;\n }>(),\n {\n colspan: 1,\n }\n );\n\n const styles = tv({\n base: "whitespace-nowrap p-4 align-middle text-sm text-foreground",\n });\n</script>\n',
1948
1963
  },
1949
1964
  {
1950
1965
  fileName: "Table/Footer.vue",
1951
1966
  dirPath: "components/UI",
1952
1967
  fileContent:
1953
- '<template>\n <tfoot :class="styles({ class: props.class })">\n <slot/>\n </tfoot>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "bg-primary font-medium text-primary-foreground",\n });\n</script>\n',
1968
+ '<template>\n <tfoot :class="styles({ class: props.class })">\n <slot />\n </tfoot>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "bg-primary font-medium text-primary-foreground",\n });\n</script>\n',
1954
1969
  },
1955
1970
  {
1956
1971
  fileName: "Table/Head.vue",
1957
1972
  dirPath: "components/UI",
1958
1973
  fileContent:
1959
- '<template>\n <th :class="styles({ class: props.class })">\n <slot/>\n </th>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "h-12 px-4 text-left align-middle font-medium text-muted-foreground hover:text-foreground",\n });\n</script>\n',
1974
+ '<template>\n <th :class="styles({ class: props.class })">\n <slot />\n </th>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "h-12 px-4 text-left align-middle font-medium text-muted-foreground hover:text-foreground",\n });\n</script>\n',
1960
1975
  },
1961
1976
  {
1962
1977
  fileName: "Table/Header.vue",
1963
1978
  dirPath: "components/UI",
1964
1979
  fileContent:
1965
- '<template>\n <thead :class="styles({ class: props.class })">\n <slot/>\n </thead>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "[&_tr]:border-b",\n });\n</script>\n',
1980
+ '<template>\n <thead :class="styles({ class: props.class })">\n <slot />\n </thead>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "[&_tr]:border-b",\n });\n</script>\n',
1966
1981
  },
1967
1982
  {
1968
1983
  fileName: "Table/Row.vue",
1969
1984
  dirPath: "components/UI",
1970
1985
  fileContent:
1971
- '<template>\n <tr :class="styles({ class: props.class })">\n <slot/>\n </tr>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",\n });\n</script>\n',
1986
+ '<template>\n <tr :class="styles({ class: props.class })">\n <slot />\n </tr>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",\n });\n</script>\n',
1972
1987
  },
1973
1988
  {
1974
1989
  fileName: "Table/Table.vue",
1975
1990
  dirPath: "components/UI",
1976
1991
  fileContent:
1977
- '<template>\n <table :class="styles({ class: props.class })">\n <slot/>\n </table>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "w-full caption-bottom border-collapse text-sm",\n });\n</script>\n',
1992
+ '<template>\n <table :class="styles({ class: props.class })">\n <slot />\n </table>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "w-full caption-bottom border-collapse text-sm",\n });\n</script>\n',
1978
1993
  },
1979
1994
  ],
1980
1995
  utils: [],
@@ -1989,7 +2004,7 @@ export default [
1989
2004
  fileName: "Tabs/Content.vue",
1990
2005
  dirPath: "components/UI",
1991
2006
  fileContent:
1992
- '<template>\n <TabsContent v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </TabsContent>\n</template>\n\n<script lang="ts" setup>\n import { TabsContent } from "radix-vue";\n import type { TabsContentProps } from "radix-vue";\n\n const props = defineProps<\n TabsContentProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",\n });\n</script>\n',
2007
+ '<template>\n <TabsContent v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot />\n </TabsContent>\n</template>\n\n<script lang="ts" setup>\n import { TabsContent } from "radix-vue";\n import type { TabsContentProps } from "radix-vue";\n\n const props = defineProps<\n TabsContentProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",\n });\n</script>\n',
1993
2008
  },
1994
2009
  {
1995
2010
  fileName: "Tabs/Indicator.vue",
@@ -2001,19 +2016,19 @@ export default [
2001
2016
  fileName: "Tabs/List.vue",
2002
2017
  dirPath: "components/UI",
2003
2018
  fileContent:
2004
- '<template>\n <TabsList :class="styles({ pill, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </TabsList>\n</template>\n\n<script lang="ts" setup>\n import { TabsList } from "radix-vue";\n import type { TabsListProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n TabsListProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n pill?: boolean;\n }\n >(),\n { pill: true }\n );\n\n const styles = tv({\n base: "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",\n variants: {\n pill: {\n true: "bg-muted",\n false: "",\n },\n },\n });\n</script>\n',
2019
+ '<template>\n <TabsList :class="styles({ pill, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </TabsList>\n</template>\n\n<script lang="ts" setup>\n import { TabsList } from "radix-vue";\n import type { TabsListProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n TabsListProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n pill?: boolean;\n }\n >(),\n { pill: true }\n );\n\n const styles = tv({\n base: "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",\n variants: {\n pill: {\n true: "bg-muted",\n false: "",\n },\n },\n });\n</script>\n',
2005
2020
  },
2006
2021
  {
2007
2022
  fileName: "Tabs/Tabs.vue",
2008
2023
  dirPath: "components/UI",
2009
2024
  fileContent:
2010
- '<template>\n <TabsRoot v-bind="forwarded">\n <slot/>\n </TabsRoot>\n</template>\n\n<script lang="ts" setup>\n import { TabsRoot, useForwardPropsEmits } from "radix-vue";\n import type { TabsRootEmits, TabsRootProps } from "radix-vue";\n\n const props = withDefaults(defineProps<TabsRootProps>(), {\n orientation: "horizontal",\n activationMode: "automatic",\n });\n const emits = defineEmits<TabsRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
2025
+ '<template>\n <TabsRoot v-bind="forwarded">\n <slot />\n </TabsRoot>\n</template>\n\n<script lang="ts" setup>\n import { TabsRoot, useForwardPropsEmits } from "radix-vue";\n import type { TabsRootEmits, TabsRootProps } from "radix-vue";\n\n const props = withDefaults(defineProps<TabsRootProps>(), {\n orientation: "horizontal",\n activationMode: "automatic",\n });\n const emits = defineEmits<TabsRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
2011
2026
  },
2012
2027
  {
2013
2028
  fileName: "Tabs/Trigger.vue",
2014
2029
  dirPath: "components/UI",
2015
2030
  fileContent:
2016
- '<template>\n <TabsTrigger v-bind="reactiveOmit(props, \'class\')" :class="styles({ pill, class: props.class })">\n <slot/>\n </TabsTrigger>\n</template>\n\n<script lang="ts" setup>\n import { TabsTrigger } from "radix-vue";\n import type { TabsTriggerProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n TabsTriggerProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n /** Whether the trigger should be pill-shaped */\n pill?: boolean;\n }\n >(),\n {\n pill: true,\n }\n );\n\n const styles = tv({\n base: "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ",\n variants: {\n pill: {\n true: "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",\n false:\n "data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",\n },\n },\n });\n</script>\n',
2031
+ '<template>\n <TabsTrigger v-bind="reactiveOmit(props, \'class\')" :class="styles({ pill, class: props.class })">\n <slot />\n </TabsTrigger>\n</template>\n\n<script lang="ts" setup>\n import { TabsTrigger } from "radix-vue";\n import type { TabsTriggerProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n TabsTriggerProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n /** Whether the trigger should be pill-shaped */\n pill?: boolean;\n }\n >(),\n {\n pill: true,\n }\n );\n\n const styles = tv({\n base: "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ",\n variants: {\n pill: {\n true: "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",\n false:\n "data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",\n },\n },\n });\n</script>\n',
2017
2032
  },
2018
2033
  ],
2019
2034
  utils: [],
@@ -2034,7 +2049,7 @@ export default [
2034
2049
  fileName: "TagsInput/Field.vue",
2035
2050
  dirPath: "components/UI",
2036
2051
  fileContent:
2037
- '<template>\n <TagsInputInput v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </TagsInputInput>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputInput } from "radix-vue";\n import type { TagsInputInputProps } from "radix-vue";\n\n const props = defineProps<TagsInputInputProps & { class?: any }>();\n\n const styles = tv({\n base: "flex-1 bg-transparent focus:outline-none sm:text-sm",\n });\n</script>\n',
2052
+ '<template>\n <TagsInputInput v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot />\n </TagsInputInput>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputInput } from "radix-vue";\n import type { TagsInputInputProps } from "radix-vue";\n\n const props = defineProps<TagsInputInputProps & { class?: any }>();\n\n const styles = tv({\n base: "flex-1 bg-transparent focus:outline-none sm:text-sm",\n });\n</script>\n',
2038
2053
  },
2039
2054
  {
2040
2055
  fileName: "TagsInput/Item.vue",
@@ -2052,13 +2067,13 @@ export default [
2052
2067
  fileName: "TagsInput/ItemText.vue",
2053
2068
  dirPath: "components/UI",
2054
2069
  fileContent:
2055
- '<template>\n <TagsInputItemText v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </TagsInputItemText>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputItemText } from "radix-vue";\n import type { TagsInputItemTextProps } from "radix-vue";\n\n const props = defineProps<TagsInputItemTextProps & { class?: any }>();\n\n const styles = tv({\n base: "leading-none sm:text-sm",\n });\n</script>\n',
2070
+ '<template>\n <TagsInputItemText v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot />\n </TagsInputItemText>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputItemText } from "radix-vue";\n import type { TagsInputItemTextProps } from "radix-vue";\n\n const props = defineProps<TagsInputItemTextProps & { class?: any }>();\n\n const styles = tv({\n base: "leading-none sm:text-sm",\n });\n</script>\n',
2056
2071
  },
2057
2072
  {
2058
2073
  fileName: "TagsInput/TagsInput.vue",
2059
2074
  dirPath: "components/UI",
2060
2075
  fileContent:
2061
- '<template>\n <TagsInputRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot/>\n </TagsInputRoot>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputRoot, useForwardPropsEmits } from "radix-vue";\n import type { TagsInputRootEmits, TagsInputRootProps } from "radix-vue";\n\n const props = defineProps<TagsInputRootProps & { class?: any }>();\n const emits = defineEmits<TagsInputRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "flex min-h-[40px] w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 leading-none transition focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",\n });\n</script>\n',
2076
+ '<template>\n <TagsInputRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot />\n </TagsInputRoot>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputRoot, useForwardPropsEmits } from "radix-vue";\n import type { TagsInputRootEmits, TagsInputRootProps } from "radix-vue";\n\n const props = defineProps<TagsInputRootProps & { class?: any }>();\n const emits = defineEmits<TagsInputRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "flex min-h-[40px] w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 leading-none transition focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",\n });\n</script>\n',
2062
2077
  },
2063
2078
  ],
2064
2079
  utils: [],
@@ -2115,7 +2130,7 @@ export default [
2115
2130
  fileName: "Toast/Action.vue",
2116
2131
  dirPath: "components/UI",
2117
2132
  fileContent:
2118
- '<template>\n <ToastAction :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </ToastAction>\n</template>\n\n<script lang="ts" setup>\n import { ToastAction } from "radix-vue";\n import type { ToastActionProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ToastActionProps & {\n /**\n * Custom class names to add to the button.\n */\n class?: any;\n }\n >(),\n {\n altText: "Action button",\n }\n );\n\n const styles = tv({\n base: "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",\n });\n</script>\n',
2133
+ '<template>\n <ToastAction :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </ToastAction>\n</template>\n\n<script lang="ts" setup>\n import { ToastAction } from "radix-vue";\n import type { ToastActionProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ToastActionProps & {\n /**\n * Custom class names to add to the button.\n */\n class?: any;\n }\n >(),\n {\n altText: "Action button",\n }\n );\n\n const styles = tv({\n base: "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",\n });\n</script>\n',
2119
2134
  },
2120
2135
  {
2121
2136
  fileName: "Toast/Close.vue",
@@ -2133,7 +2148,7 @@ export default [
2133
2148
  fileName: "Toast/Provider.vue",
2134
2149
  dirPath: "components/UI",
2135
2150
  fileContent:
2136
- '<template>\n <ToastProvider v-bind="props">\n <slot/>\n </ToastProvider>\n</template>\n\n<script lang="ts" setup>\n import { ToastProvider } from "radix-vue";\n import type { ToastProviderProps } from "radix-vue";\n\n const props = withDefaults(defineProps<ToastProviderProps>(), {\n label: "Notification",\n swipeDirection: "right",\n });\n</script>\n',
2151
+ '<template>\n <ToastProvider v-bind="props">\n <slot />\n </ToastProvider>\n</template>\n\n<script lang="ts" setup>\n import { ToastProvider } from "radix-vue";\n import type { ToastProviderProps } from "radix-vue";\n\n const props = withDefaults(defineProps<ToastProviderProps>(), {\n label: "Notification",\n swipeDirection: "right",\n });\n</script>\n',
2137
2152
  },
2138
2153
  {
2139
2154
  fileName: "Toast/Title.vue",
@@ -2145,7 +2160,7 @@ export default [
2145
2160
  fileName: "Toast/Toast.vue",
2146
2161
  dirPath: "components/UI",
2147
2162
  fileContent:
2148
- '<template>\n <ToastRoot\n v-bind="forwarded"\n :class="styles({ variant, class: props.class })"\n @update:open="onOpenChange"\n >\n <slot/>\n </ToastRoot>\n</template>\n\n<script lang="ts" setup>\n import { ToastRoot, useForwardPropsEmits } from "radix-vue";\n import type { ToastRootEmits, ToastRootProps } from "radix-vue";\n\n export interface ToastProps extends ToastRootProps {\n /**\n * Custom class names to add to the toast.\n */\n class?: any;\n /**\n * The variant of the toast.\n */\n variant?: VariantProps<typeof styles>["variant"];\n /**\n * Callback that fires when the toast is closed.\n */\n onOpenChange?: ((value: boolean) => void) | undefined;\n }\n\n const props = withDefaults(defineProps<ToastProps>(), {});\n\n const emits = defineEmits<ToastRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-4 pr-9 shadow-sm transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",\n variants: {\n variant: {\n default: "border bg-background text-foreground",\n success:\n "success group border-[var(--success-border)] bg-[--success-bg] text-[--success-text]",\n info: "info group border-[var(--info-border)] bg-[--info-bg] text-[--info-text]",\n warning:\n "warning group border-[var(--warning-border)] bg-[--warning-bg] text-[--warning-text]",\n destructive:\n "destructive group border-[var(--error-border)] bg-[--error-bg] text-[--error-text]",\n },\n },\n defaultVariants: {\n variant: "default",\n },\n });\n</script>\n',
2163
+ '<template>\n <ToastRoot\n v-bind="forwarded"\n :class="styles({ variant, class: props.class })"\n @update:open="onOpenChange"\n >\n <slot />\n </ToastRoot>\n</template>\n\n<script lang="ts" setup>\n import { ToastRoot, useForwardPropsEmits } from "radix-vue";\n import type { ToastRootEmits, ToastRootProps } from "radix-vue";\n\n export interface ToastProps extends ToastRootProps {\n /**\n * Custom class names to add to the toast.\n */\n class?: any;\n /**\n * The variant of the toast.\n */\n variant?: VariantProps<typeof styles>["variant"];\n /**\n * Callback that fires when the toast is closed.\n */\n onOpenChange?: ((value: boolean) => void) | undefined;\n }\n\n const props = withDefaults(defineProps<ToastProps>(), {});\n\n const emits = defineEmits<ToastRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-4 pr-9 shadow-sm transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",\n variants: {\n variant: {\n default: "border bg-background text-foreground",\n success:\n "success group border-[var(--success-border)] bg-[--success-bg] text-[--success-text]",\n info: "info group border-[var(--info-border)] bg-[--info-bg] text-[--info-text]",\n warning:\n "warning group border-[var(--warning-border)] bg-[--warning-bg] text-[--warning-text]",\n destructive:\n "destructive group border-[var(--error-border)] bg-[--error-bg] text-[--error-text]",\n },\n },\n defaultVariants: {\n variant: "default",\n },\n });\n</script>\n',
2149
2164
  },
2150
2165
  {
2151
2166
  fileName: "Toast/Toaster.vue",
@@ -2157,7 +2172,7 @@ export default [
2157
2172
  fileName: "Toast/Viewport.vue",
2158
2173
  dirPath: "components/UI",
2159
2174
  fileContent:
2160
- '<template>\n <ToastViewport :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </ToastViewport>\n</template>\n\n<script lang="ts" setup>\n import { ToastViewport } from "radix-vue";\n import type { ToastViewportProps } from "radix-vue";\n\n const props = defineProps<\n ToastViewportProps & {\n /**\n * Custom class names to add to the button.\n */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:bottom-auto sm:right-0 sm:flex-col md:max-w-[420px]",\n });\n</script>\n\n<style>\n [aria-label~="Notifications"] {\n display: grid;\n }\n</style>\n',
2175
+ '<template>\n <ToastViewport :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </ToastViewport>\n</template>\n\n<script lang="ts" setup>\n import { ToastViewport } from "radix-vue";\n import type { ToastViewportProps } from "radix-vue";\n\n const props = defineProps<\n ToastViewportProps & {\n /**\n * Custom class names to add to the button.\n */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:bottom-auto sm:right-0 sm:flex-col md:max-w-[420px]",\n });\n</script>\n\n<style>\n [aria-label~="Notifications"] {\n display: grid;\n }\n</style>\n',
2161
2176
  },
2162
2177
  ],
2163
2178
  utils: [],
@@ -2171,7 +2186,7 @@ export default [
2171
2186
  fileName: "Toggle.vue",
2172
2187
  dirPath: "components/UI",
2173
2188
  fileContent:
2174
- '<template>\n <ToggleRoot v-bind="forwarded" :class="styles({ variant, size, class: props.class })">\n <slot/>\n </ToggleRoot>\n</template>\n\n<script lang="ts" setup>\n import { Toggle as ToggleRoot, useForwardPropsEmits } from "radix-vue";\n import type { ToggleEmits, ToggleProps } from "radix-vue";\n\n const props = defineProps<\n ToggleProps & {\n class?: any;\n variant?: Props["variant"];\n size?: Props["size"];\n }\n >();\n\n const emits = defineEmits<ToggleEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "variant", "size"), emits);\n\n type Props = VariantProps<typeof styles>;\n\n const styles = tv({\n base: "inline-flex items-center justify-center rounded-md font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground sm:text-sm",\n variants: {\n variant: {\n default: "bg-transparent",\n outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",\n },\n size: {\n default: "h-10 px-3",\n sm: "h-9 px-2.5",\n lg: "h-11 px-5",\n },\n },\n defaultVariants: {\n variant: "default",\n size: "default",\n },\n });\n</script>\n',
2189
+ '<template>\n <ToggleRoot v-bind="forwarded" :class="styles({ variant, size, class: props.class })">\n <slot />\n </ToggleRoot>\n</template>\n\n<script lang="ts" setup>\n import { Toggle as ToggleRoot, useForwardPropsEmits } from "radix-vue";\n import type { ToggleEmits, ToggleProps } from "radix-vue";\n\n const props = defineProps<\n ToggleProps & {\n class?: any;\n variant?: Props["variant"];\n size?: Props["size"];\n }\n >();\n\n const emits = defineEmits<ToggleEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "variant", "size"), emits);\n\n type Props = VariantProps<typeof styles>;\n\n const styles = tv({\n base: "inline-flex items-center justify-center rounded-md font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground sm:text-sm",\n variants: {\n variant: {\n default: "bg-transparent",\n outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",\n },\n size: {\n default: "h-10 px-3",\n sm: "h-9 px-2.5",\n lg: "h-11 px-5",\n },\n },\n defaultVariants: {\n variant: "default",\n size: "default",\n },\n });\n</script>\n',
2175
2190
  },
2176
2191
  ],
2177
2192
  utils: [],
@@ -2186,13 +2201,13 @@ export default [
2186
2201
  fileName: "ToggleGroup/ToggleGroup.vue",
2187
2202
  dirPath: "components/UI",
2188
2203
  fileContent:
2189
- '<template>\r\n <ToggleGroupRoot\r\n v-slot="{ modelValue }"\r\n v-bind="forwarded"\r\n :class="styles({ class: props.class })"\r\n >\r\n <slot :model-value="modelValue" />\r\n </ToggleGroupRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { ToggleGroupRoot, useForwardPropsEmits } from "radix-vue";\r\n import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n ToggleGroupRootProps & {\r\n /** custom class to add to the parent */\r\n class?: any;\r\n }\r\n >();\r\n\r\n const emit = defineEmits<ToggleGroupRootEmits>();\r\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emit);\r\n\r\n const styles = tv({\r\n base: "flex items-center justify-center gap-1",\r\n });\r\n</script>\r\n',
2204
+ '<template>\n <ToggleGroupRoot\n v-slot="{ modelValue }"\n v-bind="forwarded"\n :class="styles({ class: props.class })"\n >\n <slot :model-value="modelValue" />\n </ToggleGroupRoot>\n</template>\n\n<script lang="ts" setup>\n import { ToggleGroupRoot, useForwardPropsEmits } from "radix-vue";\n import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "radix-vue";\n\n const props = defineProps<\n ToggleGroupRootProps & {\n /** custom class to add to the parent */\n class?: any;\n }\n >();\n\n const emit = defineEmits<ToggleGroupRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emit);\n\n const styles = tv({\n base: "flex items-center justify-center gap-1",\n });\n</script>\n',
2190
2205
  },
2191
2206
  {
2192
2207
  fileName: "ToggleGroup/ToggleGroupItem.vue",
2193
2208
  dirPath: "components/UI",
2194
2209
  fileContent:
2195
- '<template>\r\n <ToggleGroupItem v-bind="forwarded" :class="styles({ class: props.class, size, variant })">\r\n <slot>\r\n <Icon v-if="icon" class="size-4" :name="icon" />\r\n </slot>\r\n </ToggleGroupItem>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { ToggleGroupItem, useForwardProps } from "radix-vue";\r\n import type { ToggleGroupItemProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n ToggleGroupItemProps & {\r\n /** custom class to add to the toggle */\r\n class?: any;\r\n /** icon to display */\r\n icon?: string;\r\n /** variant of the toggle */\r\n variant?: VariantProps<typeof styles>["variant"];\r\n /** size of the toggle */\r\n size?: VariantProps<typeof styles>["size"];\r\n }\r\n >();\r\n\r\n const forwarded = useForwardProps(reactiveOmit(props, "class"));\r\n\r\n const styles = tv({\r\n base: "inline-flex items-center justify-center rounded-md font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground sm:text-sm",\r\n variants: {\r\n variant: {\r\n default: "bg-transparent",\r\n outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",\r\n },\r\n size: {\r\n default: "h-10 px-3",\r\n sm: "h-9 px-2.5",\r\n lg: "h-11 px-5",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: "default",\r\n size: "default",\r\n },\r\n });\r\n</script>\r\n',
2210
+ '<template>\n <ToggleGroupItem v-bind="forwarded" :class="styles({ class: props.class, size, variant })">\n <slot>\n <Icon v-if="icon" class="size-4" :name="icon" />\n </slot>\n </ToggleGroupItem>\n</template>\n\n<script lang="ts" setup>\n import { ToggleGroupItem, useForwardProps } from "radix-vue";\n import type { ToggleGroupItemProps } from "radix-vue";\n\n const props = defineProps<\n ToggleGroupItemProps & {\n /** custom class to add to the toggle */\n class?: any;\n /** icon to display */\n icon?: string;\n /** variant of the toggle */\n variant?: VariantProps<typeof styles>["variant"];\n /** size of the toggle */\n size?: VariantProps<typeof styles>["size"];\n }\n >();\n\n const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n const styles = tv({\n base: "inline-flex items-center justify-center rounded-md font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground sm:text-sm",\n variants: {\n variant: {\n default: "bg-transparent",\n outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",\n },\n size: {\n default: "h-10 px-3",\n sm: "h-9 px-2.5",\n lg: "h-11 px-5",\n },\n },\n defaultVariants: {\n variant: "default",\n size: "default",\n },\n });\n</script>\n',
2196
2211
  },
2197
2212
  ],
2198
2213
  utils: [],
@@ -2213,31 +2228,31 @@ export default [
2213
2228
  fileName: "Tooltip/Content.vue",
2214
2229
  dirPath: "components/UI",
2215
2230
  fileContent:
2216
- '<template>\n <UiTooltipPortal :to="to">\n <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot/>\n </TooltipContent>\n </UiTooltipPortal>\n</template>\n\n<script lang="ts" setup>\n import { TooltipContent, useForwardPropsEmits } from "radix-vue";\n import type { TooltipContentEmits, TooltipContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n TooltipContentProps & {\n to?: string | HTMLElement;\n class?: any;\n }\n >(),\n {\n side: "top",\n sideOffset: 8,\n align: "start",\n alignOffset: -4,\n avoidCollisions: true,\n collisionBoundary: () => [],\n collisionPadding: 0,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<TooltipContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
2231
+ '<template>\n <UiTooltipPortal :to="to">\n <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot />\n </TooltipContent>\n </UiTooltipPortal>\n</template>\n\n<script lang="ts" setup>\n import { TooltipContent, useForwardPropsEmits } from "radix-vue";\n import type { TooltipContentEmits, TooltipContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n TooltipContentProps & {\n to?: string | HTMLElement;\n class?: any;\n }\n >(),\n {\n side: "top",\n sideOffset: 8,\n align: "start",\n alignOffset: -4,\n avoidCollisions: true,\n collisionBoundary: () => [],\n collisionPadding: 0,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<TooltipContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
2217
2232
  },
2218
2233
  {
2219
2234
  fileName: "Tooltip/Portal.vue",
2220
2235
  dirPath: "components/UI",
2221
2236
  fileContent:
2222
- '<template>\n <TooltipPortal v-bind="props">\n <slot/>\n </TooltipPortal>\n</template>\n\n<script lang="ts" setup>\n import { TooltipPortal } from "radix-vue";\n import type { TooltipPortalProps } from "radix-vue";\n\n const props = defineProps<TooltipPortalProps>();\n</script>\n',
2237
+ '<template>\n <TooltipPortal v-bind="props">\n <slot />\n </TooltipPortal>\n</template>\n\n<script lang="ts" setup>\n import { TooltipPortal } from "radix-vue";\n import type { TooltipPortalProps } from "radix-vue";\n\n const props = defineProps<TooltipPortalProps>();\n</script>\n',
2223
2238
  },
2224
2239
  {
2225
2240
  fileName: "Tooltip/Provider.vue",
2226
2241
  dirPath: "components/UI",
2227
2242
  fileContent:
2228
- '<template>\n <TooltipProvider v-bind="props">\n <slot/>\n </TooltipProvider>\n</template>\n\n<script lang="ts" setup>\n import { TooltipProvider } from "radix-vue";\n import type { TooltipProviderProps } from "radix-vue";\n\n const props = defineProps<TooltipProviderProps>();\n</script>\n',
2243
+ '<template>\n <TooltipProvider v-bind="props">\n <slot />\n </TooltipProvider>\n</template>\n\n<script lang="ts" setup>\n import { TooltipProvider } from "radix-vue";\n import type { TooltipProviderProps } from "radix-vue";\n\n const props = defineProps<TooltipProviderProps>();\n</script>\n',
2229
2244
  },
2230
2245
  {
2231
2246
  fileName: "Tooltip/Tooltip.vue",
2232
2247
  dirPath: "components/UI",
2233
2248
  fileContent:
2234
- '<template>\n <UiTooltipProvider v-bind="props">\n <TooltipRoot v-bind="{ ...forwarded, ...$attrs }">\n <slot>\n <slot name="trigger"/>\n <slot name="content"/>\n </slot>\n </TooltipRoot>\n </UiTooltipProvider>\n</template>\n\n<script lang="ts" setup>\n import { TooltipRoot, useForwardPropsEmits } from "radix-vue";\n import type { TooltipProviderProps, TooltipRootEmits, TooltipRootProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(defineProps<TooltipRootProps & TooltipProviderProps>(), {\n delayDuration: 200,\n });\n\n const emits = defineEmits<TooltipRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
2249
+ '<template>\n <UiTooltipProvider v-bind="props">\n <TooltipRoot v-bind="{ ...forwarded, ...$attrs }">\n <slot>\n <slot name="trigger" />\n <slot name="content" />\n </slot>\n </TooltipRoot>\n </UiTooltipProvider>\n</template>\n\n<script lang="ts" setup>\n import { TooltipRoot, useForwardPropsEmits } from "radix-vue";\n import type { TooltipProviderProps, TooltipRootEmits, TooltipRootProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(defineProps<TooltipRootProps & TooltipProviderProps>(), {\n delayDuration: 200,\n });\n\n const emits = defineEmits<TooltipRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
2235
2250
  },
2236
2251
  {
2237
2252
  fileName: "Tooltip/Trigger.vue",
2238
2253
  dirPath: "components/UI",
2239
2254
  fileContent:
2240
- '<template>\n <TooltipTrigger v-bind="props">\n <slot/>\n </TooltipTrigger>\n</template>\n\n<script lang="ts" setup>\n import { TooltipTrigger } from "radix-vue";\n import type { TooltipTriggerProps } from "radix-vue";\n\n const props = defineProps<TooltipTriggerProps>();\n</script>\n',
2255
+ '<template>\n <TooltipTrigger v-bind="props">\n <slot />\n </TooltipTrigger>\n</template>\n\n<script lang="ts" setup>\n import { TooltipTrigger } from "radix-vue";\n import type { TooltipTriggerProps } from "radix-vue";\n\n const props = defineProps<TooltipTriggerProps>();\n</script>\n',
2241
2256
  },
2242
2257
  ],
2243
2258
  utils: [],
@@ -2275,7 +2290,7 @@ export default [
2275
2290
  fileName: "Vee/CurrencyInput.vue",
2276
2291
  dirPath: "components/UI",
2277
2292
  fileContent:
2278
- '<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :hint="labelHint"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiCurrencyInput\r\n :id="inputId"\r\n v-model="value"\r\n type="text"\r\n :required="required"\r\n :name="name"\r\n :disabled="disabled"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n :placeholder="placeholder"\r\n :options="options"\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import type { CurrencyInputOptions } from "vue-currency-input";\r\n\r\n const props = defineProps<{\r\n label?: string;\r\n labelHint?: string;\r\n icon?: string;\r\n hint?: string;\r\n disabled?: boolean;\r\n modelValue?: string;\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n type?: string;\r\n placeholder?: string;\r\n options?: CurrencyInputOptions;\r\n required?: boolean;\r\n }>();\r\n\r\n const inputId = useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
2293
+ '<template>\n <div class="w-full">\n <UiLabel\n v-if="label"\n :for="inputId"\n :hint="labelHint"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n >\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiCurrencyInput\n :id="inputId"\n v-model="value"\n type="text"\n :required="required"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\n :options="options"\n />\n </div>\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n import type { CurrencyInputOptions } from "vue-currency-input";\n\n const props = defineProps<{\n label?: string;\n labelHint?: string;\n icon?: string;\n hint?: string;\n disabled?: boolean;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n placeholder?: string;\n options?: CurrencyInputOptions;\n required?: boolean;\n }>();\n\n const inputId = useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
2279
2294
  },
2280
2295
  ],
2281
2296
  utils: [],
@@ -2294,7 +2309,7 @@ export default [
2294
2309
  fileName: "Vee/DateField.vue",
2295
2310
  dirPath: "components/UI",
2296
2311
  fileContent:
2297
- '<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :hint="labelHint"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <UiDateField v-bind="{ ...$attrs, ...props }" v-model="value" />\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import type { DateFieldRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n DateFieldRootProps & {\r\n label?: string;\r\n labelHint?: string;\r\n hint?: string;\r\n modelValue?: string;\r\n name?: string;\r\n \r\n rules?: any;\r\n validateOnMount?: boolean;\r\n separator?: string;\r\n separatorIcon?: string;\r\n }\r\n >();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
2312
+ '<template>\n <div class="w-full">\n <UiLabel\n v-if="label"\n :for="inputId"\n :hint="labelHint"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n >\n <UiDateField v-bind="{ ...$attrs, ...props }" v-model="value" />\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n import type { DateFieldRootProps } from "radix-vue";\n\n const props = defineProps<\n DateFieldRootProps & {\n label?: string;\n labelHint?: string;\n hint?: string;\n modelValue?: string;\n name?: string;\n\n rules?: any;\n validateOnMount?: boolean;\n separator?: string;\n separatorIcon?: string;\n }\n >();\n\n const inputId = props.id || useId();\n\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
2298
2313
  },
2299
2314
  ],
2300
2315
  utils: [],
@@ -2313,7 +2328,7 @@ export default [
2313
2328
  fileName: "Vee/Datepicker.vue",
2314
2329
  dirPath: "components/UI",
2315
2330
  fileContent:
2316
- '<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiDatepicker v-bind="datePickerProps" v-model="value">\r\n <template #header-title="{ title }">\r\n <div class="inline-flex items-center gap-1">\r\n {{ title }} <Icon name="lucide:chevron-down" class="h-4 w-4" />\r\n </div>\r\n </template>\r\n <template #default="{ inputValue, inputEvents }">\r\n <UiInput\r\n :id="inputId"\r\n :readonly="readonly"\r\n :required="required"\r\n :model-value="inputValue"\r\n :name="name"\r\n :disabled="disabled"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n :placeholder="placeholder"\r\n v-on="inputEvents"\r\n />\r\n </template>\r\n </UiDatepicker>\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = withDefaults(\r\n defineProps<{\r\n label?: string;\r\n icon?: string;\r\n hint?: string;\r\n disabled?: boolean;\r\n modelValue?: any;\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n placeholder?: string;\r\n readonly?: boolean;\r\n datePickerProps?: any;\r\n required?: boolean;\r\n }>(),\r\n {\r\n icon: "lucide:calendar-days",\r\n }\r\n );\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
2331
+ '<template>\n <div class="w-full">\n <UiLabel\n v-if="label"\n :for="inputId"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n >\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiDatepicker v-bind="datePickerProps" v-model="value">\n <template #header-title="{ title }">\n <div class="inline-flex items-center gap-1">\n {{ title }} <Icon name="lucide:chevron-down" class="h-4 w-4" />\n </div>\n </template>\n <template #default="{ inputValue, inputEvents }">\n <UiInput\n :id="inputId"\n :readonly="readonly"\n :required="required"\n :model-value="inputValue"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\n v-on="inputEvents"\n />\n </template>\n </UiDatepicker>\n </div>\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n disabled?: boolean;\n modelValue?: any;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n placeholder?: string;\n readonly?: boolean;\n datePickerProps?: any;\n required?: boolean;\n }>(),\n {\n icon: "lucide:calendar-days",\n }\n );\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
2317
2332
  },
2318
2333
  ],
2319
2334
  utils: [],
@@ -2332,7 +2347,7 @@ export default [
2332
2347
  fileName: "Vee/FileInput.vue",
2333
2348
  dirPath: "components/UI",
2334
2349
  fileContent:
2335
- '<template>\r\n <div class="w-full">\r\n <UiLabel v-if="label" :for="inputId" :class="[errorMessage && \'text-destructive\', \'mb-2\']">\r\n <span>{{ label }} <span v-if="required" class="text-destructive">*</span></span>\r\n </UiLabel>\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiInput\r\n :id="inputId"\r\n type="file"\r\n :required="required"\r\n :name="name"\r\n v-bind="$attrs"\r\n :multiple="multiple"\r\n :class="[hasIcon && \'pl-9\']"\r\n :accept="accept"\r\n @change="\r\n handleChange($event);\r\n emits(\'change\', $event.target.files);\r\n "\r\n @blur="\r\n handleBlur($event);\r\n emits(\'blur\', $event);\r\n "\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n label?: string;\r\n icon?: string;\r\n hint?: string;\r\n name: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n multiple?: boolean;\r\n accept?: string;\r\n required?: boolean;\r\n }>();\r\n\r\n const emits = defineEmits<{\r\n change: [files?: FileList | File | File[] | null];\r\n blur: [event?: FocusEvent];\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, handleChange, handleBlur } = useField(() => props.name, props.rules, {\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n });\r\n</script>\r\n',
2350
+ '<template>\n <div class="w-full">\n <UiLabel v-if="label" :for="inputId" :class="[errorMessage && \'text-destructive\', \'mb-2\']">\n <span>{{ label }} <span v-if="required" class="text-destructive">*</span></span>\n </UiLabel>\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiInput\n :id="inputId"\n type="file"\n :required="required"\n :name="name"\n v-bind="$attrs"\n :multiple="multiple"\n :class="[hasIcon && \'pl-9\']"\n :accept="accept"\n @change="\n handleChange($event);\n emits(\'change\', $event.target.files);\n "\n @blur="\n handleBlur($event);\n emits(\'blur\', $event);\n "\n />\n </div>\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n name: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n multiple?: boolean;\n accept?: string;\n required?: boolean;\n }>();\n\n const emits = defineEmits<{\n change: [files?: FileList | File | File[] | null];\n blur: [event?: FocusEvent];\n }>();\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, handleChange, handleBlur } = useField(() => props.name, props.rules, {\n label: props.label,\n validateOnMount: props.validateOnMount,\n });\n</script>\n',
2336
2351
  },
2337
2352
  ],
2338
2353
  utils: [],
@@ -2351,7 +2366,7 @@ export default [
2351
2366
  fileName: "Vee/Input.vue",
2352
2367
  dirPath: "components/UI",
2353
2368
  fileContent:
2354
- '<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :hint="labelHint"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiInput\r\n :id="inputId"\r\n v-model="value"\r\n :type="type"\r\n :required="required"\r\n :name="name"\r\n :disabled="disabled"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n :placeholder="placeholder"\r\n @blur="handleBlur"\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n label?: string;\r\n labelHint?: string;\r\n icon?: string;\r\n hint?: string;\r\n disabled?: boolean;\r\n modelValue?: string;\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n type?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
2369
+ '<template>\n <div class="w-full">\n <UiLabel\n v-if="label"\n :for="inputId"\n :hint="labelHint"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n >\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiInput\n :id="inputId"\n v-model="value"\n :type="type"\n :required="required"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\n @blur="handleBlur"\n />\n </div>\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n label?: string;\n labelHint?: string;\n icon?: string;\n hint?: string;\n disabled?: boolean;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n placeholder?: string;\n required?: boolean;\n }>();\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
2355
2370
  },
2356
2371
  ],
2357
2372
  utils: [],
@@ -2370,7 +2385,7 @@ export default [
2370
2385
  fileName: "Vee/MultiSelect.vue",
2371
2386
  dirPath: "components/UI",
2372
2387
  fileContent:
2373
- '<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="formLabel"\r\n :for="inputId"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ formLabel }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <Multiselect\r\n v-bind="$attrs"\r\n :id="inputId"\r\n ref="multiselect"\r\n v-model="value"\r\n :attrs="{\r\n id: inputId,\r\n }"\r\n :disabled="disabled"\r\n :name="name"\r\n :required="required"\r\n :classes="{\r\n containerActive: \'ring-2 ring-ring ring-offset-2 ring-offset-background transition\',\r\n }"\r\n >\r\n <template v-for="(_, slotName) in $slots" #[slotName]="scope">\r\n <slot :name="slotName" v-bind="scope" />\r\n </template>\r\n <template #clear="{ clear }">\r\n <button class="mr-2 flex items-center justify-center" @click="clear">\r\n <Icon name="heroicons:x-mark" size="16" class="text-muted-foreground" />\r\n </button>\r\n </template>\r\n </Multiselect>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script setup lang="ts">\r\n import Multiselect from "@vueform/multiselect";\r\n\r\n import "@vueform/multiselect/themes/default.css";\r\n\r\n const multiselect = shallowRef<InstanceType<typeof Multiselect> | null>(null);\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Omit<InstanceType<typeof Multiselect>, "$emit">> {}\r\n\r\n const props = defineProps<\r\n {\r\n modelValue?: any;\r\n formLabel?: string;\r\n required?: boolean;\r\n id?: string;\r\n hint?: string;\r\n disabled?: boolean;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n name?: string;\r\n } & Props\r\n >();\r\n\r\n const emit = defineEmits([\r\n "paste",\r\n "open",\r\n "close",\r\n "select",\r\n "deselect",\r\n "input",\r\n "search-change",\r\n "tag",\r\n "option",\r\n "update:modelValue",\r\n "change",\r\n "clear",\r\n "keydown",\r\n "keyup",\r\n "max",\r\n "create",\r\n "ready",\r\n ]);\r\n\r\n const inputId = props.id || useId();\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n\r\n onMounted(() => {\r\n nextTick(() => {\r\n emit("ready", multiselect.value);\r\n });\r\n });\r\n</script>\r\n\r\n<style>\r\n :root {\r\n --ms-font-size: theme("fontSize.sm");\r\n --ms-line-height: 1.5;\r\n --ms-bg: theme("colors.background");\r\n --ms-bg-disabled: transparent;\r\n --ms-border-color: theme("colors.input");\r\n --ms-border-width: 1px;\r\n --ms-border-color-active: theme("colors.input");\r\n --ms-border-width-active: 1px;\r\n --ms-radius: theme("borderRadius.md");\r\n --ms-py: theme("padding.2");\r\n --ms-px: theme("padding.3");\r\n --ms-ring-width: 0px;\r\n --ms-ring-color: theme("colors.ring");\r\n --ms-placeholder-color: theme("colors.muted.foreground");\r\n --ms-max-height: theme("height.52");\r\n\r\n --ms-spinner-color: theme("colors.muted.foreground");\r\n --ms-caret-color: theme("colors.muted.foreground");\r\n --ms-clear-color: theme("colors.muted.foreground");\r\n --ms-clear-color-hover: theme("colors.primary.DEFAULT");\r\n\r\n --ms-tag-font-size: theme("fontSize.sm");\r\n --ms-tag-line-height: 1.25rem;\r\n --ms-tag-font-weight: 500;\r\n --ms-tag-bg: theme("colors.primary.DEFAULT");\r\n --ms-tag-bg-disabled: transparent;\r\n --ms-tag-color: theme("colors.primary.foreground");\r\n --ms-tag-color-disabled: theme("colors.muted.foreground");\r\n --ms-tag-radius: theme("borderRadius.DEFAULT");\r\n --ms-tag-py: theme("padding[0.5]");\r\n\r\n --ms-dropdown-bg: theme("colors.background");\r\n --ms-dropdown-border-color: theme("colors.border");\r\n --ms-dropdown-border-width: 1px;\r\n --ms-dropdown-radius: theme("borderRadius.md");\r\n\r\n --ms-group-label-bg: theme("colors.muted.DEFAULT");\r\n --ms-group-label-color: theme("colors.muted.foreground");\r\n --ms-group-label-bg-pointed: theme("colors.primary.DEFAULT");\r\n --ms-group-label-color-pointed: theme("colors.primary.foreground");\r\n --ms-group-label-bg-disabled: theme("colors.muted.DEFAULT / 50%");\r\n --ms-group-label-color-disabled: theme("colors.muted.foreground / 50%");\r\n --ms-group-label-bg-selected: theme("colors.primary.DEFAULT");\r\n --ms-group-label-color-selected: theme("colors.primary.foreground");\r\n --ms-group-label-bg-selected-pointed: theme("colors.primary.DEFAULT");\r\n --ms-group-label-color-selected-pointed: theme("colors.primary.foreground");\r\n --ms-group-label-bg-selected-disabled: theme("colors.muted.DEFAULT / 50%");\r\n --ms-group-label-color-selected-disabled: theme("colors.muted.foreground / 50%");\r\n\r\n --ms-option-font-size: theme("fontSize.sm");\r\n --ms-option-bg-pointed: theme("colors.primary.DEFAULT");\r\n --ms-option-color-pointed: theme("colors.primary.foreground");\r\n --ms-option-bg-selected: theme("colors.primary.DEFAULT");\r\n --ms-option-color-selected: theme("colors.primary.foreground");\r\n --ms-option-bg-disabled: transparent;\r\n --ms-option-color-disabled: theme("colors.muted.foreground / 50%");\r\n --ms-option-bg-selected-pointed: theme("colors.primary.DEFAULT");\r\n --ms-option-color-selected-pointed: theme("colors.primary.foreground");\r\n --ms-option-bg-selected-disabled: theme("colors.muted.DEFAULT");\r\n --ms-option-color-selected-disabled: theme("colors.muted.foreground");\r\n\r\n --ms-empty-color: theme("colors.muted.foreground");\r\n }\r\n</style>\r\n',
2388
+ '<template>\n <div class="w-full">\n <UiLabel\n v-if="formLabel"\n :for="inputId"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n ><span>{{ formLabel }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n >\n <Multiselect\n v-bind="$attrs"\n :id="inputId"\n ref="multiselect"\n v-model="value"\n :attrs="{\n id: inputId,\n }"\n :disabled="disabled"\n :name="name"\n :required="required"\n :classes="{\n containerActive: \'ring-2 ring-ring ring-offset-2 ring-offset-background transition\',\n }"\n >\n <template v-for="(_, slotName) in $slots" #[slotName]="scope">\n <slot :name="slotName" v-bind="scope" />\n </template>\n <template #clear="{ clear }">\n <button class="mr-2 flex items-center justify-center" @click="clear">\n <Icon name="heroicons:x-mark" size="16" class="text-muted-foreground" />\n </button>\n </template>\n </Multiselect>\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script setup lang="ts">\n import Multiselect from "@vueform/multiselect";\n\n import "@vueform/multiselect/themes/default.css";\n\n const multiselect = shallowRef<InstanceType<typeof Multiselect> | null>(null);\n\n interface Props\n extends /* @vue-ignore */ Partial<Omit<InstanceType<typeof Multiselect>, "$emit">> {}\n\n const props = defineProps<\n {\n modelValue?: any;\n formLabel?: string;\n required?: boolean;\n id?: string;\n hint?: string;\n disabled?: boolean;\n rules?: any;\n validateOnMount?: boolean;\n name?: string;\n } & Props\n >();\n\n const emit = defineEmits([\n "paste",\n "open",\n "close",\n "select",\n "deselect",\n "input",\n "search-change",\n "tag",\n "option",\n "update:modelValue",\n "change",\n "clear",\n "keydown",\n "keyup",\n "max",\n "create",\n "ready",\n ]);\n\n const inputId = props.id || useId();\n\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n\n onMounted(() => {\n nextTick(() => {\n emit("ready", multiselect.value);\n });\n });\n</script>\n\n<style>\n :root {\n --ms-font-size: theme("fontSize.sm");\n --ms-line-height: 1.5;\n --ms-bg: theme("colors.background");\n --ms-bg-disabled: transparent;\n --ms-border-color: theme("colors.input");\n --ms-border-width: 1px;\n --ms-border-color-active: theme("colors.input");\n --ms-border-width-active: 1px;\n --ms-radius: theme("borderRadius.md");\n --ms-py: theme("padding.2");\n --ms-px: theme("padding.3");\n --ms-ring-width: 0px;\n --ms-ring-color: theme("colors.ring");\n --ms-placeholder-color: theme("colors.muted.foreground");\n --ms-max-height: theme("height.52");\n\n --ms-spinner-color: theme("colors.muted.foreground");\n --ms-caret-color: theme("colors.muted.foreground");\n --ms-clear-color: theme("colors.muted.foreground");\n --ms-clear-color-hover: theme("colors.primary.DEFAULT");\n\n --ms-tag-font-size: theme("fontSize.sm");\n --ms-tag-line-height: 1.25rem;\n --ms-tag-font-weight: 500;\n --ms-tag-bg: theme("colors.primary.DEFAULT");\n --ms-tag-bg-disabled: transparent;\n --ms-tag-color: theme("colors.primary.foreground");\n --ms-tag-color-disabled: theme("colors.muted.foreground");\n --ms-tag-radius: theme("borderRadius.DEFAULT");\n --ms-tag-py: theme("padding[0.5]");\n\n --ms-dropdown-bg: theme("colors.background");\n --ms-dropdown-border-color: theme("colors.border");\n --ms-dropdown-border-width: 1px;\n --ms-dropdown-radius: theme("borderRadius.md");\n\n --ms-group-label-bg: theme("colors.muted.DEFAULT");\n --ms-group-label-color: theme("colors.muted.foreground");\n --ms-group-label-bg-pointed: theme("colors.primary.DEFAULT");\n --ms-group-label-color-pointed: theme("colors.primary.foreground");\n --ms-group-label-bg-disabled: theme("colors.muted.DEFAULT / 50%");\n --ms-group-label-color-disabled: theme("colors.muted.foreground / 50%");\n --ms-group-label-bg-selected: theme("colors.primary.DEFAULT");\n --ms-group-label-color-selected: theme("colors.primary.foreground");\n --ms-group-label-bg-selected-pointed: theme("colors.primary.DEFAULT");\n --ms-group-label-color-selected-pointed: theme("colors.primary.foreground");\n --ms-group-label-bg-selected-disabled: theme("colors.muted.DEFAULT / 50%");\n --ms-group-label-color-selected-disabled: theme("colors.muted.foreground / 50%");\n\n --ms-option-font-size: theme("fontSize.sm");\n --ms-option-bg-pointed: theme("colors.primary.DEFAULT");\n --ms-option-color-pointed: theme("colors.primary.foreground");\n --ms-option-bg-selected: theme("colors.primary.DEFAULT");\n --ms-option-color-selected: theme("colors.primary.foreground");\n --ms-option-bg-disabled: transparent;\n --ms-option-color-disabled: theme("colors.muted.foreground / 50%");\n --ms-option-bg-selected-pointed: theme("colors.primary.DEFAULT");\n --ms-option-color-selected-pointed: theme("colors.primary.foreground");\n --ms-option-bg-selected-disabled: theme("colors.muted.DEFAULT");\n --ms-option-color-selected-disabled: theme("colors.muted.foreground");\n\n --ms-empty-color: theme("colors.muted.foreground");\n }\n</style>\n',
2374
2389
  },
2375
2390
  ],
2376
2391
  utils: [],
@@ -2389,7 +2404,7 @@ export default [
2389
2404
  fileName: "Vee/PinInput.vue",
2390
2405
  dirPath: "components/UI",
2391
2406
  fileContent:
2392
- '<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <div class="relative">\r\n <UiPinInput\r\n :id="inputId"\r\n v-bind="{\r\n ...$attrs,\r\n ...reactiveOmit(props, \'label\', \'hint\', \'id\', \'rules\', \'validateOnMount\', \'modelValue\'),\r\n }"\r\n v-model="value"\r\n @complete="emits(\'complete\', $event)"\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import type { PinInputRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n Omit<PinInputRootProps, "as" | "asChild"> & {\r\n label?: string;\r\n hint?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n separator?: string;\r\n inputCount?: number;\r\n }\r\n >();\r\n\r\n const emits = defineEmits<{\r\n complete: [value: string[]];\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue || [],\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
2407
+ '<template>\n <div class="w-full">\n <UiLabel\n v-if="label"\n :for="inputId"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n >\n <div class="relative">\n <UiPinInput\n :id="inputId"\n v-bind="{\n ...$attrs,\n ...reactiveOmit(props, \'label\', \'hint\', \'id\', \'rules\', \'validateOnMount\', \'modelValue\'),\n }"\n v-model="value"\n @complete="emits(\'complete\', $event)"\n />\n </div>\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n import type { PinInputRootProps } from "radix-vue";\n\n const props = defineProps<\n Omit<PinInputRootProps, "as" | "asChild"> & {\n label?: string;\n hint?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n separator?: string;\n inputCount?: number;\n }\n >();\n\n const emits = defineEmits<{\n complete: [value: string[]];\n }>();\n\n const inputId = props.id || useId();\n\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue || [],\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
2393
2408
  },
2394
2409
  ],
2395
2410
  utils: [],
@@ -2408,7 +2423,7 @@ export default [
2408
2423
  fileName: "Vee/RadioGroup.vue",
2409
2424
  dirPath: "components/UI",
2410
2425
  fileContent:
2411
- '<template>\r\n <div :class="styles({ class: props.class })">\r\n <slot name="label" :error-message="errorMessage" :value="value">\r\n <UiLabel v-if="label" class="mb-5 leading-none" :class="[errorMessage && \'text-destructive\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n </slot>\r\n <UiRadioGroup v-bind="{ ...forwarded, ...$attrs }" v-model="value">\r\n <slot/>\r\n </UiRadioGroup>\r\n <div class="flex flex-col gap-1.5">\r\n <TransitionSlide tag="div" group>\r\n <slot name="hint" :error-message="errorMessage" :value="value">\r\n <p\r\n v-if="hint && !errorMessage"\r\n key="hint"\r\n class="mt-1.5 text-sm leading-none text-muted-foreground"\r\n >\r\n {{ hint }}\r\n </p>\r\n </slot>\r\n <slot name="errorMessage" :error-message="errorMessage" :value="value">\r\n <p\r\n v-if="errorMessage"\r\n key="errorMessage"\r\n class="mt-1.5 text-sm leading-none text-destructive"\r\n >\r\n {{ errorMessage }}\r\n </p>\r\n </slot>\r\n </TransitionSlide>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { useForwardProps } from "radix-vue";\r\n import type { RadioGroupRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n RadioGroupRootProps & {\r\n label?: string;\r\n hint?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n class?: any;\r\n name: string;\r\n }\r\n >();\r\n\r\n const forwarded = useForwardProps(props);\r\n const styles = tv({\r\n base: "flex flex-col",\r\n });\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n const { errorMessage, value } = useField(() => props.name, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n type: "radio",\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
2426
+ '<template>\n <div :class="styles({ class: props.class })">\n <slot name="label" :error-message="errorMessage" :value="value">\n <UiLabel v-if="label" class="mb-5 leading-none" :class="[errorMessage && \'text-destructive\']"\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n >\n </slot>\n <UiRadioGroup v-bind="{ ...forwarded, ...$attrs }" v-model="value">\n <slot />\n </UiRadioGroup>\n <div class="flex flex-col gap-1.5">\n <TransitionSlide tag="div" group>\n <slot name="hint" :error-message="errorMessage" :value="value">\n <p\n v-if="hint && !errorMessage"\n key="hint"\n class="mt-1.5 text-sm leading-none text-muted-foreground"\n >\n {{ hint }}\n </p>\n </slot>\n <slot name="errorMessage" :error-message="errorMessage" :value="value">\n <p\n v-if="errorMessage"\n key="errorMessage"\n class="mt-1.5 text-sm leading-none text-destructive"\n >\n {{ errorMessage }}\n </p>\n </slot>\n </TransitionSlide>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup>\n import { useForwardProps } from "radix-vue";\n import type { RadioGroupRootProps } from "radix-vue";\n\n const props = defineProps<\n RadioGroupRootProps & {\n label?: string;\n hint?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n class?: any;\n name: string;\n }\n >();\n\n const forwarded = useForwardProps(props);\n const styles = tv({\n base: "flex flex-col",\n });\n\n defineOptions({ inheritAttrs: false });\n\n const { errorMessage, value } = useField(() => props.name, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n type: "radio",\n syncVModel: true,\n });\n</script>\n',
2412
2427
  },
2413
2428
  ],
2414
2429
  utils: [],
@@ -2427,7 +2442,7 @@ export default [
2427
2442
  fileName: "Vee/Select.vue",
2428
2443
  dirPath: "components/UI",
2429
2444
  fileContent:
2430
- '<template>\r\n <div class="w-full">\r\n <UiLabel v-if="label" :for="inputId" :class="[errorMessage && \'text-destructive\', \'mb-2\']">\r\n <span>{{ label }} <span v-if="required" class="text-destructive">*</span></span>\r\n </UiLabel>\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" lass="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground" />\r\n </span>\r\n </slot>\r\n <UiNativeSelect\r\n :id="inputId"\r\n v-model="value"\r\n :required="required"\r\n :trailing-icon="trailingIcon"\r\n :name="name"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n @blur="handleBlur"\r\n >\r\n <slot/>\r\n </UiNativeSelect>\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n label?: string;\r\n icon?: string;\r\n hint?: string;\r\n modelValue?: string;\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n type?: string;\r\n trailingIcon?: string;\r\n required?: boolean;\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
2445
+ '<template>\n <div class="w-full">\n <UiLabel v-if="label" :for="inputId" :class="[errorMessage && \'text-destructive\', \'mb-2\']">\n <span>{{ label }} <span v-if="required" class="text-destructive">*</span></span>\n </UiLabel>\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" lass="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground" />\n </span>\n </slot>\n <UiNativeSelect\n :id="inputId"\n v-model="value"\n :required="required"\n :trailing-icon="trailingIcon"\n :name="name"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n @blur="handleBlur"\n >\n <slot />\n </UiNativeSelect>\n </div>\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n trailingIcon?: string;\n required?: boolean;\n }>();\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
2431
2446
  },
2432
2447
  ],
2433
2448
  utils: [],
@@ -2446,7 +2461,7 @@ export default [
2446
2461
  fileName: "Vee/TagsInput.vue",
2447
2462
  dirPath: "components/UI",
2448
2463
  fileContent:
2449
- '<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiTagsInput\r\n v-model="value"\r\n :required="required"\r\n :name="name"\r\n :disabled="disabled"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n >\r\n <UiTagsInputItem v-for="tag in value" :key="tag" :value="tag" />\r\n <UiTagsInputField :id="inputId" :placeholder="placeholder" />\r\n </UiTagsInput>\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n label?: string;\r\n icon?: string;\r\n hint?: string;\r\n disabled?: boolean;\r\n modelValue?: string[];\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n type?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
2464
+ '<template>\n <div class="w-full">\n <UiLabel\n v-if="label"\n :for="inputId"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n >\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiTagsInput\n v-model="value"\n :required="required"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n >\n <UiTagsInputItem v-for="tag in value" :key="tag" :value="tag" />\n <UiTagsInputField :id="inputId" :placeholder="placeholder" />\n </UiTagsInput>\n </div>\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n disabled?: boolean;\n modelValue?: string[];\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n placeholder?: string;\n required?: boolean;\n }>();\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
2450
2465
  },
2451
2466
  ],
2452
2467
  utils: [],
@@ -2465,7 +2480,7 @@ export default [
2465
2480
  fileName: "Vee/Textarea.vue",
2466
2481
  dirPath: "components/UI",
2467
2482
  fileContent:
2468
- '<template>\r\n <div class="w-full">\r\n <UiLabel v-if="label" :for="inputId" :class="[errorMessage && \'text-destructive\', \'mb-2\']">\r\n <span>{{ label }} <span v-if="required" class="text-destructive">*</span></span>\r\n </UiLabel>\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute left-3 top-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiTextarea\r\n :id="inputId"\r\n v-model="value"\r\n :required="required"\r\n :rows="rows"\r\n :name="name"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n :placeholder="placeholder"\r\n @blur="handleBlur"\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n label?: string;\r\n icon?: string;\r\n hint?: string;\r\n modelValue?: string;\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n placeholder?: string;\r\n rows?: number;\r\n required?: boolean;\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
2483
+ '<template>\n <div class="w-full">\n <UiLabel v-if="label" :for="inputId" :class="[errorMessage && \'text-destructive\', \'mb-2\']">\n <span>{{ label }} <span v-if="required" class="text-destructive">*</span></span>\n </UiLabel>\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute left-3 top-3 flex items-center justify-center">\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiTextarea\n :id="inputId"\n v-model="value"\n :required="required"\n :rows="rows"\n :name="name"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\n @blur="handleBlur"\n />\n </div>\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n placeholder?: string;\n rows?: number;\n required?: boolean;\n }>();\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
2469
2484
  },
2470
2485
  ],
2471
2486
  utils: [],