ui-thing 0.1.39 → 0.1.41

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 (6) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/README.md +6 -0
  3. package/dist/index.js +379 -379
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/comps.ts +360 -360
package/src/comps.ts CHANGED
@@ -6,31 +6,31 @@ export default [
6
6
  files: [
7
7
  {
8
8
  fileName: "Accordion/Accordion.vue",
9
- dirPath: "components/UI",
9
+ dirPath: "app/components/Ui",
10
10
  fileContent:
11
11
  '<template>\n <AccordionRoot v-slot="rootSlotProps" v-bind="forwarded">\n <slot v-bind="rootSlotProps" :items="items">\n <template v-for="(item, i) in items" :key="i">\n <UiAccordionItem v-slot="itemSlotProps" :disabled="item.disabled" :value="item.value">\n <slot v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }" name="header">\n <UiAccordionHeader>\n <slot v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }" name="trigger">\n <UiAccordionTrigger :title="item.title" :icon="item.icon" />\n </slot>\n </UiAccordionHeader>\n </slot>\n <slot name="content" v-bind="{ ...itemSlotProps, ...rootSlotProps, items, item }">\n <UiAccordionContent :content="item.content" />\n </slot>\n </UiAccordionItem>\n </template>\n </slot>\n </AccordionRoot>\n</template>\n\n<script setup lang="ts">\n import { AccordionRoot, useForwardPropsEmits } from "radix-vue";\n import type { AccordionRootEmits, AccordionRootProps } from "radix-vue";\n\n export interface AccordionItem {\n title?: string;\n content?: string;\n value: string;\n disabled?: boolean;\n icon?: string;\n }\n\n const props = withDefaults(\n defineProps<\n AccordionRootProps & {\n items?: AccordionItem[];\n }\n >(),\n { type: "single", collapsible: true, items: () => [] }\n );\n\n const emits = defineEmits<AccordionRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "items"), emits);\n</script>\n',
12
12
  },
13
13
  {
14
14
  fileName: "Accordion/Content.vue",
15
- dirPath: "components/UI",
15
+ dirPath: "app/components/Ui",
16
16
  fileContent:
17
17
  '<template>\n <AccordionContent v-bind="forwarded" :class="styles({ class: props.class })">\n <div class="pb-4 pt-0">\n <slot>{{ content }}</slot>\n </div>\n </AccordionContent>\n</template>\n\n<script lang="ts" setup>\n import { AccordionContent } from "radix-vue";\n import type { AccordionContentProps } from "radix-vue";\n\n const props = defineProps<\n AccordionContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The content of the accordion */\n content?: any;\n }\n >();\n\n const forwarded = reactiveOmit(props, "class", "content");\n\n const styles = tv({\n base: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",\n });\n</script>\n',
18
18
  },
19
19
  {
20
20
  fileName: "Accordion/Header.vue",
21
- dirPath: "components/UI",
21
+ dirPath: "app/components/Ui",
22
22
  fileContent:
23
23
  '<template>\n <AccordionHeader v-bind="forwarded" :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 forwarded = reactiveOmit(props, "class");\n\n const styles = tv({\n base: "flex",\n });\n</script>\n',
24
24
  },
25
25
  {
26
26
  fileName: "Accordion/Item.vue",
27
- dirPath: "components/UI",
27
+ dirPath: "app/components/Ui",
28
28
  fileContent:
29
29
  '<template>\n <AccordionItem v-slot="slotProps" v-bind="forwarded" :class="styles({ class: props.class })">\n <slot v-bind="slotProps" />\n </AccordionItem>\n</template>\n\n<script setup lang="ts">\n import { AccordionItem } from "radix-vue";\n import type { AccordionItemProps } from "radix-vue";\n\n const props = defineProps<\n AccordionItemProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const forwarded = reactiveOmit(props, "class");\n\n const styles = tv({\n base: "border-b",\n });\n</script>\n',
30
30
  },
31
31
  {
32
32
  fileName: "Accordion/Trigger.vue",
33
- dirPath: "components/UI",
33
+ dirPath: "app/components/Ui",
34
34
  fileContent:
35
35
  '<template>\n <AccordionTrigger v-bind="forwarded" :class="styles({ class: props.class })">\n <slot :props="props">\n {{ title }}\n </slot>\n <slot name="icon" :props="props">\n <Icon v-if="icon" :name="icon" class="h-4 w-4 shrink-0 transition-transform duration-200" />\n </slot>\n </AccordionTrigger>\n</template>\n\n<script lang="ts" setup>\n import { AccordionTrigger } from "radix-vue";\n import type { AccordionTriggerProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AccordionTriggerProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The title of the accordion trigger */\n title?: string;\n /** The icon to show next to the title */\n icon?: string;\n }\n >(),\n {\n class: undefined,\n title: "",\n icon: "lucide:chevron-down",\n }\n );\n\n const forwarded = reactiveOmit(props, "class", "icon", "title");\n\n const styles = tv({\n base: "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [&[data-state=open]>svg]:rotate-180",\n });\n</script>\n',
36
36
  },
@@ -46,19 +46,19 @@ export default [
46
46
  files: [
47
47
  {
48
48
  fileName: "Alert/Alert.vue",
49
- dirPath: "components/UI",
49
+ dirPath: "app/components/Ui",
50
50
  fileContent:
51
51
  '<template>\n <div v-if="shown" :class="styles({ variant: variant, class: props.class })">\n <slot :props="props" name="icon">\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n </slot>\n <div>\n <slot :props="props">\n <UiAlertTitle v-if="title" :title="title" />\n <UiAlertDescription v-if="description" :description="description" />\n </slot>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n /** Custom class to add to the `Alert` parent */\n class?: any;\n /**\n * Whether or not the `Alert` is shown.\n * @default true\n */\n modelValue?: boolean;\n /** The variant of the `Alert` */\n variant?: VariantProps<typeof styles>["variant"];\n /** The title that is passed to the `AlertTitle` component */\n title?: string;\n /** The description that is passed to the `AlertDescription` component */\n description?: string;\n /** The icon that should be displayed*/\n icon?: string;\n }>(),\n {\n modelValue: true,\n variant: "default",\n title: undefined,\n description: undefined,\n icon: undefined,\n class: undefined,\n }\n );\n\n const emit = defineEmits(["update:modelValue"]);\n const shown = useVModel(props, "modelValue", emit, { defaultValue: true });\n\n const styles = tv({\n base: "relative flex w-full gap-3 rounded-lg border p-4",\n variants: {\n variant: {\n default: "bg-background text-foreground",\n destructive:\n "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",\n },\n },\n defaultVariants: {\n variant: "default",\n },\n });\n</script>\n',
52
52
  },
53
53
  {
54
54
  fileName: "Alert/Description.vue",
55
- dirPath: "components/UI",
55
+ dirPath: "app/components/Ui",
56
56
  fileContent:
57
57
  '<template>\n <Primitive v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>{{ description }}</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 to add to the parent */\n class?: any;\n /** The description text that should be displayed */\n description?: string;\n }\n >(),\n { as: "div", class: undefined, description: undefined }\n );\n\n const forwarded = reactiveOmit(props, "class", "description");\n\n const styles = tv({\n base: "text-sm [&_p]:leading-relaxed",\n });\n</script>\n',
58
58
  },
59
59
  {
60
60
  fileName: "Alert/Title.vue",
61
- dirPath: "components/UI",
61
+ dirPath: "app/components/Ui",
62
62
  fileContent:
63
63
  '<template>\n <Primitive v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>{{ title }}</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 to add to the parent */\n class?: any;\n /** The title text that should be displayed */\n title?: string;\n }\n >(),\n { as: "h5", class: undefined, title: undefined }\n );\n\n const forwarded = reactiveOmit(props, "class", "title");\n\n const styles = tv({\n base: "mb-1 font-medium leading-none tracking-tight",\n });\n</script>\n',
64
64
  },
@@ -82,67 +82,67 @@ export default [
82
82
  files: [
83
83
  {
84
84
  fileName: "AlertDialog/Action.vue",
85
- dirPath: "components/UI",
85
+ dirPath: "app/components/Ui",
86
86
  fileContent:
87
87
  '<template>\n <AlertDialogAction\n v-bind="forwarded"\n :class="buttonStyles({ variant, size, disabled, class: props.class })"\n >\n <slot>{{ text }} </slot>\n </AlertDialogAction>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogAction } from "radix-vue";\n import type { AlertDialogActionProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AlertDialogActionProps & {\n /** Action to perform when the button is clicked */\n onClick?: () => void;\n /** Text to display in the button */\n text?: string;\n /** Custom class(es) to add to the button */\n class?: any;\n /** Whether the button is disabled */\n disabled?: boolean;\n /** The button\'s visual variant */\n variant?: VariantProps<typeof buttonStyles>["variant"];\n /** The button\'s visual size */\n size?: VariantProps<typeof buttonStyles>["size"];\n }\n >(),\n {\n text: "Continue",\n variant: "default",\n size: "default",\n class: undefined,\n onClick: undefined,\n }\n );\n\n const forwarded = reactiveOmit(props, "class", "text", "variant", "size");\n</script>\n',
88
88
  },
89
89
  {
90
90
  fileName: "AlertDialog/AlertDialog.vue",
91
- dirPath: "components/UI",
91
+ dirPath: "app/components/Ui",
92
92
  fileContent:
93
93
  '<template>\n <AlertDialogRoot v-bind="forwarded">\n <slot>\n <slot name="trigger">\n <UiAlertDialogTrigger v-if="triggerText" as-child>\n <UiButton variant="outline">{{ triggerText }}</UiButton>\n </UiAlertDialogTrigger>\n </slot>\n <slot name="content">\n <UiAlertDialogContent>\n <slot name="header">\n <UiAlertDialogHeader>\n <slot name="title">\n <UiAlertDialogTitle v-if="title" :title="title" />\n </slot>\n <slot name="description">\n <UiAlertDialogDescription v-if="description" :description="description" />\n </slot>\n </UiAlertDialogHeader>\n </slot>\n <slot name="footer">\n <UiAlertDialogFooter>\n <slot name="cancel">\n <UiAlertDialogCancel />\n </slot>\n <slot name="action">\n <UiAlertDialogAction />\n </slot>\n </UiAlertDialogFooter>\n </slot>\n </UiAlertDialogContent>\n </slot>\n </slot>\n </AlertDialogRoot>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogRoot, useForwardPropsEmits } from "radix-vue";\n import type { AlertDialogEmits, AlertDialogProps } from "radix-vue";\n\n const props = defineProps<\n AlertDialogProps & {\n /** Text to display in the trigger button */\n triggerText?: string;\n /** Text to be passed to the `AlertDialogTitle` */\n title?: string;\n /** Text to be passed to the `AlertDialogDescription` */\n description?: string;\n }\n >();\n\n const emits = defineEmits<AlertDialogEmits>();\n\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "description", "title", "triggerText"),\n emits\n );\n</script>\n',
94
94
  },
95
95
  {
96
96
  fileName: "AlertDialog/Cancel.vue",
97
- dirPath: "components/UI",
97
+ dirPath: "app/components/Ui",
98
98
  fileContent:
99
99
  '<template>\n <AlertDialogCancel\n v-bind="forwarded"\n :class="buttonStyles({ variant, size, disabled, class: props.class })"\n >\n <slot>{{ text }}</slot>\n </AlertDialogCancel>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogCancel } from "radix-vue";\n import type { AlertDialogCancelProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AlertDialogCancelProps & {\n /** Action to perform when the button is clicked */\n onClick?: () => void;\n /** Text to display in the button */\n text?: string;\n /** Custom class(es) to add to the button */\n class?: any;\n /** Whether the button is disabled */\n disabled?: boolean;\n /** The button\'s visual variant */\n variant?: VariantProps<typeof buttonStyles>["variant"];\n /** The button\'s visual size */\n size?: VariantProps<typeof buttonStyles>["size"];\n }\n >(),\n {\n text: "Cancel",\n variant: "outline",\n size: "default",\n class: undefined,\n onClick: undefined,\n }\n );\n\n const forwarded = reactiveOmit(props, "class", "text", "variant", "size");\n</script>\n',
100
100
  },
101
101
  {
102
102
  fileName: "AlertDialog/Content.vue",
103
- dirPath: "components/UI",
103
+ dirPath: "app/components/Ui",
104
104
  fileContent:
105
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",
109
- dirPath: "components/UI",
109
+ dirPath: "app/components/Ui",
110
110
  fileContent:
111
111
  '<template>\n <AlertDialogDescription v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>{{ description }}</slot>\n </AlertDialogDescription>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogDescription } from "radix-vue";\n import type { AlertDialogDescriptionProps } from "radix-vue";\n\n const props = defineProps<\n AlertDialogDescriptionProps & {\n /** Text to display in the description */\n description?: string;\n /** Custom class(es) to add to the description */\n class?: any;\n }\n >();\n\n const forwarded = reactiveOmit(props, "class", "description");\n\n const styles = tv({\n base: "text-sm text-muted-foreground",\n });\n</script>\n',
112
112
  },
113
113
  {
114
114
  fileName: "AlertDialog/Footer.vue",
115
- dirPath: "components/UI",
115
+ dirPath: "app/components/Ui",
116
116
  fileContent:
117
117
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\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 {\n as: "div",\n class: undefined,\n }\n );\n\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",\n });\n</script>\n',
118
118
  },
119
119
  {
120
120
  fileName: "AlertDialog/Header.vue",
121
- dirPath: "components/UI",
121
+ dirPath: "app/components/Ui",
122
122
  fileContent:
123
123
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\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 {\n as: "div",\n class: undefined,\n }\n );\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex flex-col gap-2 text-center sm:text-left",\n });\n</script>\n',
124
124
  },
125
125
  {
126
126
  fileName: "AlertDialog/Overlay.vue",
127
- dirPath: "components/UI",
127
+ dirPath: "app/components/Ui",
128
128
  fileContent:
129
129
  '<template>\n <AlertDialogOverlay v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogOverlay } from "radix-vue";\n import type { AlertDialogOverlayProps } from "radix-vue";\n\n const props = defineProps<\n AlertDialogOverlayProps & {\n /** Custom class(es) to add to the overlay */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",\n });\n</script>\n',
130
130
  },
131
131
  {
132
132
  fileName: "AlertDialog/Portal.vue",
133
- dirPath: "components/UI",
133
+ dirPath: "app/components/Ui",
134
134
  fileContent:
135
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",
139
- dirPath: "components/UI",
139
+ dirPath: "app/components/Ui",
140
140
  fileContent:
141
141
  '<template>\n <AlertDialogTitle v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>{{ title }}</slot>\n </AlertDialogTitle>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogTitle } from "radix-vue";\n import type { AlertDialogTitleProps } from "radix-vue";\n\n const props = defineProps<\n AlertDialogTitleProps & {\n /** Text to display in the title */\n title?: string;\n /** Custom class(es) to add to the title */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "title");\n const styles = tv({\n base: "text-lg font-semibold",\n });\n</script>\n',
142
142
  },
143
143
  {
144
144
  fileName: "AlertDialog/Trigger.vue",
145
- dirPath: "components/UI",
145
+ dirPath: "app/components/Ui",
146
146
  fileContent:
147
147
  '<template>\n <AlertDialogTrigger v-bind="props">\n <slot />\n </AlertDialogTrigger>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogTrigger } from "radix-vue";\n import type { AlertDialogTriggerProps } from "radix-vue";\n\n const props = defineProps<AlertDialogTriggerProps>();\n</script>\n',
148
148
  },
@@ -156,7 +156,7 @@ export default [
156
156
  files: [
157
157
  {
158
158
  fileName: "AspectRatio.vue",
159
- dirPath: "components/UI",
159
+ dirPath: "app/components/Ui",
160
160
  fileContent:
161
161
  '<template>\n <AspectRatio v-bind="props">\n <slot />\n </AspectRatio>\n</template>\n\n<script lang="ts" setup>\n import { AspectRatio } from "radix-vue";\n import type { AspectRatioProps } from "radix-vue";\n\n const props = defineProps<AspectRatioProps>();\n</script>\n',
162
162
  },
@@ -172,91 +172,91 @@ export default [
172
172
  files: [
173
173
  {
174
174
  fileName: "Autocomplete/Anchor.vue",
175
- dirPath: "components/UI",
175
+ dirPath: "app/components/Ui",
176
176
  fileContent:
177
177
  '<template>\n <ComboboxAnchor v-bind="props" :class="styles({ class: props.class })">\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<\n ComboboxAnchorProps & {\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",\n });\n</script>\n',
178
178
  },
179
179
  {
180
180
  fileName: "Autocomplete/Arrow.vue",
181
- dirPath: "components/UI",
181
+ dirPath: "app/components/Ui",
182
182
  fileContent:
183
183
  '<template>\n <ComboboxArrow v-bind="props" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { ComboboxArrow } from "radix-vue";\n import type { ComboboxArrowProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxArrowProps & {\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "rotate-45 border bg-muted",\n });\n</script>\n',
184
184
  },
185
185
  {
186
186
  fileName: "Autocomplete/Autocomplete.vue",
187
- dirPath: "components/UI",
187
+ dirPath: "app/components/Ui",
188
188
  fileContent:
189
189
  '<template>\n <ComboboxRoot v-bind="forwarded" :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<\n ComboboxRootProps & {\n class?: any;\n }\n >();\n\n const emits = defineEmits<ComboboxRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n const styles = tv({\n base: "relative",\n });\n</script>\n',
190
190
  },
191
191
  {
192
192
  fileName: "Autocomplete/Cancel.vue",
193
- dirPath: "components/UI",
193
+ dirPath: "app/components/Ui",
194
194
  fileContent:
195
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",
199
- dirPath: "components/UI",
199
+ dirPath: "app/components/Ui",
200
200
  fileContent:
201
201
  '<template>\n <!-- <UiAutocompletePortal> -->\n <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <UiAutocompleteViewport>\n <slot />\n </UiAutocompleteViewport>\n </ComboboxContent>\n <!-- </UiAutocompletePortal> -->\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 const props = withDefaults(\n defineProps<\n ComboboxContentProps & {\n class?: any;\n }\n >(),\n {\n position: "popper",\n bodyLock: true,\n side: "bottom",\n sideOffset: 8,\n class: undefined,\n }\n );\n\n const emits = defineEmits<ComboboxContentEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n\n const styles = tv({\n base: "z-50 max-h-[300px] w-[var(--radix-popper-anchor-width)] min-w-[8rem] overflow-hidden overflow-y-auto 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',
202
202
  },
203
203
  {
204
204
  fileName: "Autocomplete/Empty.vue",
205
- dirPath: "components/UI",
205
+ dirPath: "app/components/Ui",
206
206
  fileContent:
207
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
- dirPath: "components/UI",
211
+ dirPath: "app/components/Ui",
212
212
  fileContent:
213
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",
217
- dirPath: "components/UI",
217
+ dirPath: "app/components/Ui",
218
218
  fileContent:
219
219
  '<template>\n <ComboboxInput v-bind="props" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { ComboboxInput } from "radix-vue";\n import type { ComboboxInputProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxInputProps & {\n placeholder?: string;\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "size-full grow rounded-md bg-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n });\n</script>\n',
220
220
  },
221
221
  {
222
222
  fileName: "Autocomplete/Item.vue",
223
- dirPath: "components/UI",
223
+ dirPath: "app/components/Ui",
224
224
  fileContent:
225
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",
229
- dirPath: "components/UI",
229
+ dirPath: "app/components/Ui",
230
230
  fileContent:
231
231
  '<template>\n <ComboboxItemIndicator v-bind="props">\n <slot><Icon :name="icon || \'ph:check\'" class="h-4 w-4" /></slot>\n </ComboboxItemIndicator>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxItemIndicator } from "radix-vue";\n import type { ComboboxItemIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxItemIndicatorProps & {\n icon?: string;\n }\n >();\n</script>\n',
232
232
  },
233
233
  {
234
234
  fileName: "Autocomplete/Label.vue",
235
- dirPath: "components/UI",
235
+ dirPath: "app/components/Ui",
236
236
  fileContent:
237
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
- dirPath: "components/UI",
241
+ dirPath: "app/components/Ui",
242
242
  fileContent:
243
243
  '<template>\n <ComboboxPortal position="popper" 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
- dirPath: "components/UI",
247
+ dirPath: "app/components/Ui",
248
248
  fileContent:
249
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
- dirPath: "components/UI",
253
+ dirPath: "app/components/Ui",
254
254
  fileContent:
255
255
  '<template>\n <ComboboxTrigger v-bind="forwarded" :class="styles({ class: props.class })">\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<\n ComboboxTriggerProps & {\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "inline-flex shrink-0 cursor-pointer items-center justify-center",\n });\n</script>\n',
256
256
  },
257
257
  {
258
258
  fileName: "Autocomplete/Viewport.vue",
259
- dirPath: "components/UI",
259
+ dirPath: "app/components/Ui",
260
260
  fileContent:
261
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
  },
@@ -271,19 +271,19 @@ export default [
271
271
  files: [
272
272
  {
273
273
  fileName: "Avatar/Avatar.vue",
274
- dirPath: "components/UI",
274
+ dirPath: "app/components/Ui",
275
275
  fileContent:
276
276
  '<template>\n <AvatarRoot :as="as" :as-child="asChild" :class="styles({ class: props.class })">\n <slot>\n <slot name="image">\n <UiAvatarImage\n v-if="src"\n :src="src"\n :alt="alt"\n :class="imageClass"\n @loading-status-change="emits(\'loadingStatusChange\', $event)"\n />\n </slot>\n <slot name="fallback">\n <UiAvatarFallback :delay-ms="delayMs" :class="fallbackClass" :fallback="fallback" />\n </slot>\n </slot>\n </AvatarRoot>\n</template>\n\n<script lang="ts" setup>\n import { AvatarRoot } from "radix-vue";\n import type { AvatarImageEmits, AvatarImageProps, AvatarRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AvatarRootProps &\n Partial<AvatarImageProps> & {\n class?: any;\n imageClass?: any;\n fallbackClass?: any;\n alt?: string;\n fallback?: string;\n delayMs?: number;\n }\n >(),\n {\n class: undefined,\n imageClass: undefined,\n fallbackClass: undefined,\n alt: undefined,\n fallback: undefined,\n delayMs: undefined,\n }\n );\n\n const emits = defineEmits<AvatarImageEmits>();\n const styles = tv({\n base: "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",\n });\n</script>\n',
277
277
  },
278
278
  {
279
279
  fileName: "Avatar/Fallback.vue",
280
- dirPath: "components/UI",
280
+ dirPath: "app/components/Ui",
281
281
  fileContent:
282
282
  '<template>\n <AvatarFallback :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>\n {{ fallback }}\n </slot>\n </AvatarFallback>\n</template>\n\n<script lang="ts" setup>\n import { AvatarFallback } from "radix-vue";\n import type { AvatarFallbackProps } from "radix-vue";\n\n const props = defineProps<\n AvatarFallbackProps & {\n /** The text to display inside th eavatar */\n fallback?: string;\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "fallback");\n const styles = tv({\n base: "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",\n });\n</script>\n',
283
283
  },
284
284
  {
285
285
  fileName: "Avatar/Image.vue",
286
- dirPath: "components/UI",
286
+ dirPath: "app/components/Ui",
287
287
  fileContent:
288
288
  '<template>\n <AvatarImage v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { AvatarImage, useForwardPropsEmits } from "radix-vue";\n import type { AvatarImageEmits, AvatarImageProps } from "radix-vue";\n\n const props = defineProps<\n AvatarImageProps & {\n /** The alt text for the image */\n alt?: string;\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >();\n const emits = defineEmits<AvatarImageEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "aspect-square h-full w-full object-cover",\n });\n</script>\n',
289
289
  },
@@ -298,7 +298,7 @@ export default [
298
298
  files: [
299
299
  {
300
300
  fileName: "Badge.vue",
301
- dirPath: "components/UI",
301
+ dirPath: "app/components/Ui",
302
302
  fileContent:
303
303
  '<template>\n <component\n :is="elementType"\n :class="badgeVariants({ disabled, size, variant, class: props.class })"\n v-bind="forwarded"\n @click="onClick"\n >\n <slot />\n </component>\n</template>\n\n<script lang="ts">\n import { reactiveOmit } from "@vueuse/core";\n import { useForwardProps } from "radix-vue";\n import type { NuxtLinkProps } from "#app/components";\n</script>\n<script lang="ts" setup>\n const badgeVariants = tv({\n base: "inline-flex items-center rounded-full border 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 size: {\n sm: "px-2.5 py-0.5 text-xs font-medium",\n md: "px-2.5 py-1 text-sm font-semibold",\n lg: "px-3 py-1.5 text-sm font-semibold",\n },\n },\n defaultVariants: {\n variant: "default",\n disabled: false,\n size: "sm",\n },\n });\n\n type BadgeProps = VariantProps<typeof badgeVariants>;\n\n const props = defineProps<\n NuxtLinkProps & {\n /** Any additional class that should be added to the badge */\n class?: any;\n /** The variant of the badge */\n variant?: BadgeProps["variant"];\n /** The size of the badge */\n size?: BadgeProps["size"];\n /** The action to perform when the badge is clicked */\n onClick?: () => void;\n /** Should the badge be disabled or not */\n disabled?: boolean;\n /** The element to render the badge as */\n tag?: string;\n }\n >();\n\n const forwarded = useForwardProps(reactiveOmit(props, "class", "variant", "onClick", "disabled"));\n\n const elementType = computed(() => {\n if (props.tag) return props.tag;\n if (props.href || props.to) return resolveComponent("NuxtLink");\n if (props.onClick) return "button";\n return props.tag || "div";\n });\n</script>\n',
304
304
  },
@@ -313,7 +313,7 @@ export default [
313
313
  files: [
314
314
  {
315
315
  fileName: "Breadcrumbs.vue",
316
- dirPath: "components/UI",
316
+ dirPath: "app/components/Ui",
317
317
  fileContent:
318
318
  '<template>\n <div :class="styles({ class: props.class })">\n <template v-for="(item, i) in items" :key="i">\n <div class="flex items-center gap-3">\n <div class="flex cursor-pointer items-center gap-2">\n <slot name="crumbIcon" :item="item" :index="i">\n <Icon\n v-if="item.icon"\n :name="item.icon"\n :class="[!isNotLastItem(i) && \'text-primary\']"\n />\n </slot>\n <slot :item="item" :is-not-last-item="isNotLastItem" :index="i" name="link">\n <NuxtLink\n v-if="item.label"\n :to="!item?.disabled ? item.link : \'\'"\n :class="[\n isNotLastItem(i)\n ? \'text-muted-foreground hover:underline\'\n : \'font-semibold text-primary\',\n ]"\n class="text-sm text-foreground"\n @click="item?.click?.()"\n >{{ item.label }}</NuxtLink\n >\n </slot>\n </div>\n <slot name="separator" :item="item" :index="i">\n <Icon v-if="isNotLastItem(i)" :name="separator" class="h-3 w-3 text-muted-foreground" />\n </slot>\n </div>\n </template>\n </div>\n</template>\n\n<script setup lang="ts">\n export interface Crumbs {\n label: string;\n icon?: string;\n link?: string;\n disabled?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n click?: Function;\n }\n const props = withDefaults(\n defineProps<{\n /**\n * The items to display in the breadcrumbs.\n */\n items?: Crumbs[];\n /**\n * The separator to use between each breadcrumb.\n */\n separator?: string;\n class?: any;\n }>(),\n {\n separator: "heroicons:chevron-right",\n items: () => [],\n class: undefined,\n }\n );\n\n const isNotLastItem = (index: number) => {\n return index !== props?.items?.length - 1;\n };\n\n const styles = tv({\n base: "flex w-full items-center gap-4",\n });\n</script>\n',
319
319
  },
@@ -336,7 +336,7 @@ export default [
336
336
  files: [
337
337
  {
338
338
  fileName: "Button.vue",
339
- dirPath: "components/UI",
339
+ dirPath: "app/components/Ui",
340
340
  fileContent:
341
341
  '<template>\n <component\n :is="elementType"\n :class="\n buttonStyles({\n hasIcon: !!icon,\n disabled: disabled || loading,\n variant: variant,\n size: size,\n class: props.class,\n })\n "\n :disabled="disabled || loading"\n v-bind="forwarded"\n >\n <slot name="iconLeft">\n <div\n v-if="icon && iconPlacement == \'left\'"\n class="group-hover:translate-x-100 flex w-0 shrink-0 translate-x-[0%] items-center justify-center pr-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:pr-2 group-hover:opacity-100"\n >\n <Icon :name="icon" class="size-5" />\n </div>\n </slot>\n <slot>\n <span v-if="text">{{ text }}</span>\n </slot>\n <slot name="iconRight">\n <div\n v-if="icon && iconPlacement == \'right\'"\n class="flex w-0 shrink-0 translate-x-[100%] items-center justify-center pl-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100"\n >\n <Icon :name="icon" class="size-5" />\n </div>\n </slot>\n </component>\n</template>\n\n<script setup lang="ts">\n import { reactiveOmit } from "@vueuse/core";\n import { useForwardProps } from "radix-vue";\n import type { NuxtLinkProps } from "#app/components";\n\n type ButtonProps = VariantProps<typeof buttonStyles>;\n const props = withDefaults(\n defineProps<\n NuxtLinkProps & {\n /** The type fro the button */\n type?: "button" | "submit" | "reset";\n /** Whether the button is disabled */\n disabled?: boolean;\n /** Whether the button is loading */\n loading?: boolean;\n /** The action to perform when the button is clicked */\n onClick?: any;\n /** The element to render the button as */\n as?: string;\n /** Custom class(es) to add to parent element */\n class?: any;\n /** The variant of the button */\n variant?: ButtonProps["variant"];\n /** The size of the button */\n size?: ButtonProps["size"];\n /** The text to display in the button */\n text?: string;\n /** Should the icon be displayed on the `left` or the `right`? */\n iconPlacement?: "left" | "right";\n /** The icon to display in the button */\n icon?: string;\n }\n >(),\n {\n type: "button",\n }\n );\n\n const elementType = computed(() => {\n if (props.as) return props.as;\n if (props.href || props.to || props.target) return resolveComponent("NuxtLink");\n return "button";\n });\n\n const forwarded = useForwardProps(\n reactiveOmit(\n props,\n "class",\n "text",\n "icon",\n "iconPlacement",\n "size",\n "variant",\n "as",\n "loading",\n "disabled"\n )\n );\n</script>\n',
342
342
  },
@@ -353,7 +353,7 @@ export default [
353
353
  files: [
354
354
  {
355
355
  fileName: "Calendar.vue",
356
- dirPath: "components/UI",
356
+ dirPath: "app/components/Ui",
357
357
  fileContent:
358
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
  },
@@ -368,37 +368,37 @@ export default [
368
368
  files: [
369
369
  {
370
370
  fileName: "Card/Card.vue",
371
- dirPath: "components/UI",
371
+ dirPath: "app/components/Ui",
372
372
  fileContent:
373
373
  '<template>\n <Primitive :as="as" :as-child="asChild" :class="styles({ class: props.class })">\n <slot>\n <slot name="header">\n <UiCardHeader>\n <slot name="title">\n <UiCardTitle v-if="title || $slots.title" :title="title" />\n </slot>\n <slot name="description">\n <UiCardDescription\n v-if="description || $slots.description"\n :description="description"\n />\n </slot>\n </UiCardHeader>\n </slot>\n <slot v-if="content || $slots.content" name="content">\n <UiCardContent>\n <div v-html="content" />\n </UiCardContent>\n </slot>\n <slot name="footer" />\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 /** Title that should be displayed. Passed to the `CardTitle` component */\n title?: string;\n /** Description that should be displayed. Passed to the `CardDescription` component */\n description?: string;\n /** Content that should be displayed. Passed to the `CardContent` component */\n content?: string;\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n as: "div",\n title: undefined,\n description: undefined,\n content: undefined,\n class: undefined,\n }\n );\n\n const styles = tv({\n base: "rounded-lg border bg-card text-card-foreground shadow-sm",\n });\n</script>\n',
374
374
  },
375
375
  {
376
376
  fileName: "Card/Content.vue",
377
- dirPath: "components/UI",
377
+ dirPath: "app/components/Ui",
378
378
  fileContent:
379
379
  '<template>\n <Primitive :as="as" :as-child="asChild" :class="styles({ class: props.class })">\n <slot>\n {{ content }}\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 /** Content to display in the card */\n content?: string;\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n { as: "div" }\n );\n const styles = tv({\n base: "p-6 [&+*]:pt-0",\n });\n</script>\n',
380
380
  },
381
381
  {
382
382
  fileName: "Card/Description.vue",
383
- dirPath: "components/UI",
383
+ dirPath: "app/components/Ui",
384
384
  fileContent:
385
385
  '<template>\n <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">\n <slot>\n {{ description }}\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 /** Description to display in the card */\n description?: string;\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n const styles = tv({\n base: "text-sm text-muted-foreground",\n });\n</script>\n',
386
386
  },
387
387
  {
388
388
  fileName: "Card/Footer.vue",
389
- dirPath: "components/UI",
389
+ dirPath: "app/components/Ui",
390
390
  fileContent:
391
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
- dirPath: "components/UI",
395
+ dirPath: "app/components/Ui",
396
396
  fileContent:
397
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",
401
- dirPath: "components/UI",
401
+ dirPath: "app/components/Ui",
402
402
  fileContent:
403
403
  '<template>\n <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">\n <slot>\n {{ title }}\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 /** Title to display in the card */\n title?: string;\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n as: "h3",\n }\n );\n\n const styles = tv({\n base: "text-xl font-semibold leading-none tracking-tight",\n });\n</script>\n',
404
404
  },
@@ -423,49 +423,49 @@ export default [
423
423
  files: [
424
424
  {
425
425
  fileName: "Chart/Area.vue",
426
- dirPath: "components/UI",
426
+ dirPath: "app/components/Ui",
427
427
  fileContent:
428
428
  '<template>\n <div :class="styles({ class: props.class })">\n <UiChartLegend\n v-if="showLegend"\n v-model:items="legendItems"\n @legend-item-click="handleLegendItemClick"\n />\n\n <VisXYContainer\n :style="{ height: isMounted ? \'100%\' : \'auto\' }"\n :margin="{ left: 20, right: 20 }"\n :data="data"\n >\n <svg width="0" height="0">\n <defs>\n <linearGradient\n v-for="(color, i) in colors"\n :id="`${chartRef}-color-${i}`"\n :key="i"\n x1="0"\n y1="0"\n x2="0"\n y2="1"\n >\n <template v-if="showGradiant">\n <stop offset="5%" :stop-color="color" stop-opacity="0.4" />\n <stop offset="95%" :stop-color="color" stop-opacity="0" />\n </template>\n <template v-else>\n <stop offset="0%" :stop-color="color" />\n </template>\n </linearGradient>\n </defs>\n </svg>\n\n <UiChartCrosshair\n v-if="showTooltip"\n :colors="colors"\n :items="legendItems"\n :index="index"\n :custom-tooltip="customTooltip"\n />\n\n <template v-for="(category, i) in categories" :key="category">\n <VisArea\n :x="(d: Data, i: number) => i"\n :y="(d: Data) => d[category]"\n color="auto"\n :curve-type="curveType"\n :attributes="{\n [Area.selectors.area]: {\n fill: `url(#${chartRef}-color-${i})`,\n },\n }"\n :opacity="\n legendItems.find((item) => item.name === category)?.inactive ? filterOpacity : 1\n "\n />\n </template>\n\n <template v-for="(category, i) in categories" :key="category">\n <VisLine\n :x="(d: Data, i: number) => i"\n :y="(d: Data) => d[category]"\n :color="colors[i]"\n :curve-type="curveType"\n :attributes="{\n [Line.selectors.line]: {\n opacity: legendItems.find((item) => item.name === category)?.inactive\n ? filterOpacity\n : 1,\n },\n }"\n />\n </template>\n\n <VisAxis\n v-if="showXAxis"\n type="x"\n :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"\n :grid-line="false"\n :tick-line="false"\n tick-text-color="hsl(var(--vis-text-color))"\n />\n <VisAxis\n v-if="showYAxis"\n type="y"\n :tick-line="false"\n :tick-format="yFormatter"\n :domain-line="false"\n :grid-line="showGridLine"\n :attributes="{\n [Axis.selectors.grid]: {\n class: \'text-muted\',\n },\n }"\n tick-text-color="hsl(var(--vis-text-color))"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n\n<script lang="ts">\n import { Area, Axis, CurveType, Line } from "@unovis/ts";\n import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue";\n import type { BulletLegendItemInterface, Spacing } from "@unovis/ts";\n\n type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;\n\n export interface AreaChartProps<T extends Record<string, any>> {\n /**\n * The source data, in which each entry is a dictionary.\n */\n data: T[];\n /**\n * Select the categories from your data. Used to populate the legend and toolip.\n */\n categories: KeyOf<T>[];\n /**\n * Sets the key to map the data to the axis.\n */\n index: KeyOf<T>;\n /**\n * Change the default colors.\n */\n colors?: string[];\n /**\n * Margin of each the container\n */\n margin?: Spacing;\n /**\n * Change the opacity of the non-selected field\n * @default 0.2\n */\n filterOpacity?: number;\n /**\n * Function to format X label\n */\n xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n /**\n * Function to format Y label\n */\n yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n /**\n * Controls the visibility of the X axis.\n * @default true\n */\n showXAxis?: boolean;\n /**\n * Controls the visibility of the Y axis.\n * @default true\n */\n showYAxis?: boolean;\n /**\n * Controls the visibility of tooltip.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Controls the visibility of legend.\n * @default true\n */\n showLegend?: boolean;\n /**\n * Controls the visibility of gridline.\n * @default true\n */\n showGridLine?: boolean;\n }\n</script>\n\n<script setup lang="ts" generic="T extends Record<string, any>">\n const styles = tv({\n base: "flex h-[400px] w-full flex-col items-end",\n });\n\n const props = withDefaults(\n defineProps<\n AreaChartProps<T> & {\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n /**\n * Type of curve\n */\n curveType?: CurveType;\n /**\n * Controls the visibility of gradient.\n * @default true\n */\n showGradiant?: boolean;\n /**\n * Additional class to be added to the container.\n */\n class?: any;\n }\n >(),\n {\n curveType: CurveType.MonotoneX,\n filterOpacity: 0.2,\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n showGradiant: true,\n }\n );\n\n const emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number];\n }>();\n\n type KeyOfT = Extract<keyof T, string>;\n type Data = (typeof props.data)[number];\n\n const chartRef = useId();\n\n const index = computed(() => props.index as KeyOfT);\n const colors = computed(() =>\n props.colors?.length ? props.colors : defaultColors(props.categories.length)\n );\n\n const legendItems = ref<BulletLegendItemInterface[]>(\n props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n }))\n );\n\n const isMounted = useMounted();\n\n function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits("legendItemClick", d, i);\n }\n</script>\n',
429
429
  },
430
430
  {
431
431
  fileName: "Chart/Bar.vue",
432
- dirPath: "components/UI",
432
+ dirPath: "app/components/Ui",
433
433
  fileContent:
434
434
  '<template>\n <div :class="styles({ class: props.class })">\n <UiChartLegend\n v-if="showLegend"\n v-model:items="legendItems"\n @legend-item-click="handleLegendItemClick"\n />\n\n <VisXYContainer :data="data" :style="{ height: isMounted ? \'100%\' : \'auto\' }" :margin="margin">\n <UiChartCrosshair\n v-if="showTooltip"\n :colors="colors"\n :items="legendItems"\n :custom-tooltip="customTooltip"\n :index="index"\n />\n\n <VisBarComponent\n :x="(d: Data, i: number) => i"\n :y="categories.map((category) => (d: Data) => d[category])"\n :color="colors"\n :rounded-corners="roundedCorners"\n :bar-padding="0.05"\n :attributes="{\n [selectorsBar]: {\n opacity: (d: Data, i: number) => {\n const pos = i % categories.length;\n return legendItems[pos]?.inactive ? filterOpacity : 1;\n },\n },\n }"\n />\n\n <VisAxis\n v-if="showXAxis"\n type="x"\n :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"\n :grid-line="false"\n :tick-line="false"\n tick-text-color="hsl(var(--vis-text-color))"\n />\n <VisAxis\n v-if="showYAxis"\n type="y"\n :tick-line="false"\n :tick-format="yFormatter"\n :domain-line="false"\n :grid-line="showGridLine"\n :attributes="{\n [Axis.selectors.grid]: {\n class: \'text-muted\',\n },\n }"\n tick-text-color="hsl(var(--vis-text-color))"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n\n<script lang="ts">\n import { Axis, GroupedBar, StackedBar } from "@unovis/ts";\n import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from "@unovis/vue";\n import type { BulletLegendItemInterface, Spacing } from "@unovis/ts";\n\n type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;\n\n export interface BarChartProps<T extends Record<string, any>> {\n /**\n * The source data, in which each entry is a dictionary.\n */\n data: T[];\n /**\n * Select the categories from your data. Used to populate the legend and toolip.\n */\n categories: KeyOf<T>[];\n /**\n * Sets the key to map the data to the axis.\n */\n index: KeyOf<T>;\n /**\n * Change the default colors.\n */\n colors?: string[];\n /**\n * Margin of each the container\n */\n margin?: Spacing;\n /**\n * Change the opacity of the non-selected field\n * @default 0.2\n */\n filterOpacity?: number;\n /**\n * Function to format X label\n */\n xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n /**\n * Function to format Y label\n */\n yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n /**\n * Controls the visibility of the X axis.\n * @default true\n */\n showXAxis?: boolean;\n /**\n * Controls the visibility of the Y axis.\n * @default true\n */\n showYAxis?: boolean;\n /**\n * Controls the visibility of tooltip.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Controls the visibility of legend.\n * @default true\n */\n showLegend?: boolean;\n /**\n * Controls the visibility of gridline.\n * @default true\n */\n showGridLine?: boolean;\n }\n</script>\n\n<script setup lang="ts" generic="T extends Record<string, any>">\n const styles = tv({\n base: "flex h-[400px] w-full flex-col items-end",\n });\n const props = withDefaults(\n defineProps<\n BarChartProps<T> & {\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n /**\n * Change the type of the chart\n * @default "grouped"\n */\n type?: "stacked" | "grouped";\n /**\n * Rounded bar corners\n * @default 0\n */\n roundedCorners?: number;\n /**\n * Additional class to be added to the container\n */\n class?: any;\n }\n >(),\n {\n type: "grouped",\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n filterOpacity: 0.2,\n roundedCorners: 0,\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n }\n );\n const emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number];\n }>();\n\n type KeyOfT = Extract<keyof T, string>;\n type Data = (typeof props.data)[number];\n\n const index = computed(() => props.index as KeyOfT);\n const colors = computed(() =>\n props.colors?.length ? props.colors : defaultColors(props.categories.length)\n );\n const legendItems = ref<BulletLegendItemInterface[]>(\n props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n }))\n );\n\n const isMounted = useMounted();\n\n function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits("legendItemClick", d, i);\n }\n\n const VisBarComponent = computed(() =>\n props.type === "grouped" ? VisGroupedBar : VisStackedBar\n );\n const selectorsBar = computed(() =>\n props.type === "grouped" ? GroupedBar.selectors.bar : StackedBar.selectors.bar\n );\n</script>\n',
435
435
  },
436
436
  {
437
437
  fileName: "Chart/Crosshair.vue",
438
- dirPath: "components/UI",
438
+ dirPath: "app/components/Ui",
439
439
  fileContent:
440
440
  '<template>\n <VisTooltip :horizontal-shift="20" :vertical-shift="20" />\n <VisCrosshair :template="template" :color="color" />\n</template>\n\n<script setup lang="ts">\n import { omit } from "@unovis/ts";\n import { VisCrosshair, VisTooltip } from "@unovis/vue";\n import { UiChartTooltip } from "#components";\n import { createApp } from "vue";\n import type { BulletLegendItemInterface } from "@unovis/ts";\n\n const props = withDefaults(\n defineProps<{\n colors: string[];\n index: string;\n items: BulletLegendItemInterface[];\n customTooltip?: Component;\n }>(),\n {\n colors: () => [],\n }\n );\n\n // Use weakmap to store reference to each datapoint for Tooltip\n const wm = new WeakMap();\n function template(d: any) {\n if (wm.has(d)) {\n return wm.get(d);\n } else {\n const componentDiv = document.createElement("div");\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items.find((i) => i.name === key);\n return { ...legendReference, value };\n });\n const TooltipComponent = props.customTooltip ?? UiChartTooltip;\n createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(\n componentDiv\n );\n wm.set(d, componentDiv.innerHTML);\n return componentDiv.innerHTML;\n }\n }\n\n function color(d: unknown, i: number) {\n return props.colors[i] ?? "transparent";\n }\n</script>\n',
441
441
  },
442
442
  {
443
443
  fileName: "Chart/Donut.vue",
444
- dirPath: "components/UI",
444
+ dirPath: "app/components/Ui",
445
445
  fileContent:
446
446
  '<template>\n <div :class="styles({ class: props.class })">\n <VisSingleContainer\n :style="{ height: isMounted ? \'100%\' : \'auto\' }"\n :margin="{ left: 20, right: 20 }"\n :data="data"\n >\n <UiChartSingleTooltip\n :selector="Donut.selectors.segment"\n :index="category"\n :items="legendItems"\n :value-formatter="valueFormatter"\n :custom-tooltip="customTooltip"\n />\n\n <VisDonut\n :value="(d: Data) => d[category]"\n :sort-function="sortFunction"\n :color="colors"\n :arc-width="type === \'donut\' ? 20 : 0"\n :show-background="false"\n :central-label="type === \'donut\' ? valueFormatter(totalValue) : \'\'"\n :events="{\n [Donut.selectors.segment]: {\n click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n if (d?.data?.[index] === activeSegmentKey) {\n activeSegmentKey = undefined;\n elements.forEach((el) => (el.style.opacity = \'1\'));\n } else {\n activeSegmentKey = d?.data?.[index];\n elements.forEach((el) => (el.style.opacity = `${filterOpacity}`));\n elements[i].style.opacity = \'1\';\n }\n },\n },\n }"\n />\n\n <slot />\n </VisSingleContainer>\n </div>\n</template>\n\n<script lang="ts">\n import { Donut } from "@unovis/ts";\n import { VisDonut, VisSingleContainer } from "@unovis/vue";\n import type { Spacing } from "@unovis/ts";\n\n type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;\n\n export interface DonutChartProps<T extends Record<string, any>> {\n /**\n * The source data, in which each entry is a dictionary.\n */\n data: T[];\n /**\n * Sets the key to map the data to the axis.\n */\n index: KeyOf<T>;\n /**\n * Change the default colors.\n */\n colors?: string[];\n /**\n * Margin of each the container\n */\n margin?: Spacing;\n /**\n * Change the opacity of the non-selected field\n * @default 0.2\n */\n filterOpacity?: number;\n /**\n * Controls the visibility of tooltip.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Controls the visibility of legend.\n * @default true\n */\n showLegend?: boolean;\n }\n</script>\n<script setup lang="ts" generic="T extends Record<string, any>">\n const styles = tv({\n base: "flex h-48 w-full flex-col items-end",\n });\n const props = withDefaults(\n defineProps<\n Pick<\n DonutChartProps<T>,\n "data" | "colors" | "index" | "margin" | "showLegend" | "showTooltip" | "filterOpacity"\n > & {\n /**\n * Sets the name of the key containing the quantitative chart values.\n */\n category: KeyOfT;\n /**\n * Change the type of the chart\n * @default "donut"\n */\n type?: "donut" | "pie";\n /**\n * Function to sort the segment\n */\n sortFunction?: (a: any, b: any) => number | undefined;\n /**\n * Controls the formatting for the label.\n */\n valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n /**\n * Custom class\n */\n class?: any;\n }\n >(),\n {\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n sortFunction: () => undefined,\n valueFormatter: (tick: number) => `${tick}`,\n type: "donut",\n filterOpacity: 0.2,\n showTooltip: true,\n showLegend: true,\n }\n );\n\n type KeyOfT = Extract<keyof T, string>;\n type Data = (typeof props.data)[number];\n\n const category = computed(() => props.category as KeyOfT);\n const index = computed(() => props.index as KeyOfT);\n\n const isMounted = useMounted();\n const activeSegmentKey = ref<string>();\n const colors = computed(() =>\n props.colors?.length\n ? props.colors\n : defaultColors(props.data.filter((d) => d[props.category]).filter(Boolean).length)\n );\n const legendItems = computed(() =>\n props.data.map((item, i) => ({\n name: item[props.index],\n color: colors.value[i],\n inactive: false,\n }))\n );\n\n const totalValue = computed(() =>\n props.data.reduce((prev, curr) => {\n return prev + curr[props.category];\n }, 0)\n );\n</script>\n',
447
447
  },
448
448
  {
449
449
  fileName: "Chart/Legend.vue",
450
- dirPath: "components/UI",
450
+ dirPath: "app/components/Ui",
451
451
  fileContent:
452
452
  '<template>\n <div ref="elRef" class="w-max">\n <VisBulletLegend :items="items" :on-legend-item-click="onLegendItemClick" />\n </div>\n</template>\n\n<script setup lang="ts">\n import { BulletLegend } from "@unovis/ts";\n import { VisBulletLegend } from "@unovis/vue";\n import type { BulletLegendItemInterface } from "@unovis/ts";\n\n const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n items: () => [],\n });\n\n const emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number];\n "update:items": [payload: BulletLegendItemInterface[]];\n }>();\n\n const elRef = ref<HTMLElement>();\n\n onMounted(() => {\n const selector = `.${BulletLegend.selectors.item}`;\n nextTick(() => {\n const elements = elRef.value?.querySelectorAll(selector);\n const classes = buttonStyles({ variant: "ghost", size: "xs" }).split(" ");\n elements?.forEach((el) => el.classList.add(...classes, "!inline-flex", "!mr-2"));\n });\n });\n\n function onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits("legendItemClick", d, i);\n const isBulletActive = !props.items[i].inactive;\n const isFilterApplied = props.items.some((i) => i.inactive);\n if (isFilterApplied && isBulletActive) {\n // reset filter\n emits(\n "update:items",\n props.items.map((item) => ({ ...item, inactive: false }))\n );\n } else {\n // apply selection, set other item as inactive\n emits(\n "update:items",\n props.items.map((item) =>\n item.name === d.name ? { ...d, inactive: false } : { ...item, inactive: true }\n )\n );\n }\n }\n</script>\n',
453
453
  },
454
454
  {
455
455
  fileName: "Chart/Line.vue",
456
- dirPath: "components/UI",
456
+ dirPath: "app/components/Ui",
457
457
  fileContent:
458
458
  '<template>\n <div :class="styles({ class: props.class })">\n <UiChartLegend\n v-if="showLegend"\n v-model:items="legendItems"\n @legend-item-click="handleLegendItemClick"\n />\n\n <VisXYContainer\n :margin="{ left: 20, right: 20 }"\n :data="data"\n :style="{ height: isMounted ? \'100%\' : \'auto\' }"\n >\n <UiChartCrosshair\n v-if="showTooltip"\n :colors="colors"\n :items="legendItems"\n :index="index"\n :custom-tooltip="customTooltip"\n />\n\n <template v-for="(category, i) in categories" :key="category">\n <VisLine\n :x="(d: Data, i: number) => i"\n :y="(d: Data) => d[category]"\n :curve-type="curveType"\n :color="colors[i]"\n :attributes="{\n [Line.selectors.line]: {\n opacity: legendItems.find((item) => item.name === category)?.inactive\n ? filterOpacity\n : 1,\n },\n }"\n />\n </template>\n\n <VisAxis\n v-if="showXAxis"\n type="x"\n :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"\n :grid-line="false"\n :tick-line="false"\n tick-text-color="hsl(var(--vis-text-color))"\n />\n <VisAxis\n v-if="showYAxis"\n type="y"\n :tick-line="false"\n :tick-format="yFormatter"\n :domain-line="false"\n :grid-line="showGridLine"\n :attributes="{\n [Axis.selectors.grid]: {\n class: \'text-muted\',\n },\n }"\n tick-text-color="hsl(var(--vis-text-color))"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n\n<script lang="ts">\n import { Axis, CurveType, Line } from "@unovis/ts";\n import { VisAxis, VisLine, VisXYContainer } from "@unovis/vue";\n import type { BulletLegendItemInterface, Spacing } from "@unovis/ts";\n\n type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;\n\n export interface LineChartProps<T extends Record<string, any>> {\n /**\n * The source data, in which each entry is a dictionary.\n */\n data: T[];\n /**\n * Select the categories from your data. Used to populate the legend and toolip.\n */\n categories: KeyOf<T>[];\n /**\n * Sets the key to map the data to the axis.\n */\n index: KeyOf<T>;\n /**\n * Change the default colors.\n */\n colors?: string[];\n /**\n * Margin of each the container\n */\n margin?: Spacing;\n /**\n * Change the opacity of the non-selected field\n * @default 0.2\n */\n filterOpacity?: number;\n /**\n * Function to format X label\n */\n xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n /**\n * Function to format Y label\n */\n yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string;\n /**\n * Controls the visibility of the X axis.\n * @default true\n */\n showXAxis?: boolean;\n /**\n * Controls the visibility of the Y axis.\n * @default true\n */\n showYAxis?: boolean;\n /**\n * Controls the visibility of tooltip.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Controls the visibility of legend.\n * @default true\n */\n showLegend?: boolean;\n /**\n * Controls the visibility of gridline.\n * @default true\n */\n showGridLine?: boolean;\n }\n</script>\n\n<script setup lang="ts" generic="T extends Record<string, any>">\n const styles = tv({\n base: "flex h-[400px] w-full flex-col items-end",\n });\n const props = withDefaults(\n defineProps<\n LineChartProps<T> & {\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component;\n /**\n * Type of curve\n */\n curveType?: CurveType;\n /**\n * Additional class to be added to the container.\n */\n class?: any;\n }\n >(),\n {\n curveType: CurveType.MonotoneX,\n filterOpacity: 0.2,\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n }\n );\n\n const emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number];\n }>();\n\n type KeyOfT = Extract<keyof T, string>;\n type Data = (typeof props.data)[number];\n\n const index = computed(() => props.index as KeyOfT);\n const colors = computed(() =>\n props.colors?.length ? props.colors : defaultColors(props.categories.length)\n );\n\n const legendItems = ref<BulletLegendItemInterface[]>(\n props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n }))\n );\n\n const isMounted = useMounted();\n\n function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits("legendItemClick", d, i);\n }\n</script>\n',
459
459
  },
460
460
  {
461
461
  fileName: "Chart/SingleTooltip.vue",
462
- dirPath: "components/UI",
462
+ dirPath: "app/components/Ui",
463
463
  fileContent:
464
464
  '<template>\n <VisTooltip\n :horizontal-shift="20"\n :vertical-shift="20"\n :triggers="{\n [selector]: template,\n }"\n />\n</template>\n<script setup lang="ts">\n import { omit } from "@unovis/ts";\n import { VisTooltip } from "@unovis/vue";\n import { UiChartTooltip } from "#components";\n import { createApp } from "vue";\n import type { BulletLegendItemInterface } from "@unovis/ts";\n\n const props = withDefaults(\n defineProps<{\n selector: string;\n index: string;\n items?: BulletLegendItemInterface[];\n valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;\n customTooltip?: Component;\n }>(),\n {\n valueFormatter: (tick: number) => `${tick}`,\n }\n );\n\n // Use weakmap to store reference to each datapoint for Tooltip\n const wm = new WeakMap();\n function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n if (props.index in d) {\n if (wm.has(d)) {\n return wm.get(d);\n } else {\n const componentDiv = document.createElement("div");\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items?.find((i) => i.name === key);\n return { ...legendReference, value: props.valueFormatter(value) };\n });\n const TooltipComponent = props.customTooltip ?? UiChartTooltip;\n createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(\n componentDiv\n );\n wm.set(d, componentDiv.innerHTML);\n return componentDiv.innerHTML;\n }\n } else {\n const data = d.data;\n\n if (wm.has(data)) {\n return wm.get(data);\n } else {\n const style = getComputedStyle(elements[i]);\n const omittedData = [\n { name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill },\n ];\n const componentDiv = document.createElement("div");\n const TooltipComponent = props.customTooltip ?? UiChartTooltip;\n createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(\n componentDiv\n );\n wm.set(d, componentDiv.innerHTML);\n return componentDiv.innerHTML;\n }\n }\n }\n</script>\n',
465
465
  },
466
466
  {
467
467
  fileName: "Chart/Tooltip.vue",
468
- dirPath: "components/UI",
468
+ dirPath: "app/components/Ui",
469
469
  fileContent:
470
470
  '<template>\n <UiCard class="text-sm">\n <UiCardHeader v-if="title" class="border-b p-3">\n <UiCardTitle>\n {{ title }}\n </UiCardTitle>\n </UiCardHeader>\n <UiCardContent class="flex min-w-[180px] flex-col gap-1 !p-3">\n <div v-for="(item, key) in data" :key="key" class="flex justify-between">\n <div class="flex items-center">\n <span class="mr-2 h-2.5 w-2.5">\n <svg width="100%" height="100%" viewBox="0 0 30 30">\n <path\n d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0"\n :stroke="item.color"\n :fill="item.color"\n stroke-width="1"\n />\n </svg>\n </span>\n <span>{{ item.name }}</span>\n </div>\n <span class="ml-4 font-semibold">{{ item.value }}</span>\n </div>\n </UiCardContent>\n </UiCard>\n</template>\n\n<script setup lang="ts">\n defineProps<{\n title?: string;\n data: {\n name: string;\n color: string;\n value: any;\n }[];\n }>();\n</script>\n',
471
471
  },
@@ -479,13 +479,13 @@ export default [
479
479
  files: [
480
480
  {
481
481
  fileName: "Checkbox/Checkbox.vue",
482
- dirPath: "components/UI",
482
+ dirPath: "app/components/Ui",
483
483
  fileContent:
484
484
  '<template>\n <CheckboxRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <Transition enter-active-class="transition" enter-from-class="opacity-0 scale-0">\n <UiCheckboxIndicator :checked="checked" :icon="icon" />\n </Transition>\n </slot>\n </CheckboxRoot>\n</template>\n\n<script lang="ts" setup>\n import { CheckboxRoot, useForwardPropsEmits } from "radix-vue";\n import type { CheckboxRootEmits, CheckboxRootProps } from "radix-vue";\n\n const props = defineProps<\n CheckboxRootProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n /**\n * ID of the checkbox\n */\n id?: string;\n /**\n * Icon to display when the checkbox is checked\n * @default lucide:check\n */\n icon?: string;\n }\n >();\n\n const emit = defineEmits<CheckboxRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "icon"), emit);\n\n const styles = tv({\n base: "peer h-[18px] w-[18px] shrink-0 rounded-sm border border-primary ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",\n });\n</script>\n',
485
485
  },
486
486
  {
487
487
  fileName: "Checkbox/Indicator.vue",
488
- dirPath: "components/UI",
488
+ dirPath: "app/components/Ui",
489
489
  fileContent:
490
490
  '<template>\n <CheckboxIndicator :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>\n <Icon :name="checked == \'indeterminate\' ? \'lucide:minus\' : icon" class="h-4 w-4" />\n </slot>\n </CheckboxIndicator>\n</template>\n\n<script lang="ts" setup>\n import { CheckboxIndicator } from "radix-vue";\n import type { CheckboxIndicatorProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n CheckboxIndicatorProps & {\n /** The state of the checkbox */\n checked?: boolean | "indeterminate";\n /** Custom class(es) to add to the element */\n class?: any;\n /**\n * Icon to display when the checkbox is checked\n * @default lucide:check\n */\n icon?: string;\n }\n >(),\n {\n icon: "lucide:check",\n }\n );\n const forwarded = reactiveOmit(props, "class", "icon");\n const styles = tv({\n base: "flex items-center justify-center text-current",\n });\n</script>\n',
491
491
  },
@@ -500,7 +500,7 @@ export default [
500
500
  files: [
501
501
  {
502
502
  fileName: "Chip.vue",
503
- dirPath: "components/UI",
503
+ dirPath: "app/components/Ui",
504
504
  fileContent:
505
505
  '<template>\n <div class="relative inline-flex flex-shrink-0 items-center justify-center">\n <slot />\n <TransitionScale>\n <span\n v-if="show"\n :class="[styles({ position, size, inset, class: [props.color, props.class] })]"\n >\n <slot name="content">\n {{ text }}\n </slot>\n </span>\n </TransitionScale>\n </div>\n</template>\n\n<script lang="ts" setup>\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(\n defineProps<{\n text?: string;\n color?: string;\n size?: VariantProps<typeof styles>["size"];\n position?: VariantProps<typeof styles>["position"];\n inset?: boolean;\n show?: boolean;\n class?: any;\n }>(),\n { show: true, color: "bg-primary", inset: false }\n );\n\n const styles = tv({\n base: "absolute flex items-center justify-center whitespace-nowrap rounded-full font-medium text-foreground ring-[2px] ring-background",\n variants: {\n position: {\n "top-right": "right-0 top-0",\n "bottom-right": "bottom-0 right-0",\n "top-left": "left-0 top-0",\n "bottom-left": "bottom-0 left-0",\n },\n inset: {\n true: "",\n false: "",\n },\n size: {\n "3xs": "h-[4px] min-w-[4px] p-px text-[4px]",\n "2xs": "h-[5px] min-w-[5px] p-px text-[5px]",\n xs: "h-1.5 min-w-[0.375rem] p-px text-[6px]",\n sm: "h-2 min-w-[0.5rem] p-0.5 text-[7px]",\n md: "h-2.5 min-w-2.5 p-0.5 text-[8px]",\n lg: "h-3 min-w-[0.75rem] p-0.5 text-[10px]",\n xl: "h-3.5 min-w-[0.875rem] p-1 text-[11px]",\n "2xl": "h-4 min-w-[1rem] p-1 text-[12px]",\n "3xl": "h-5 min-w-[1.25rem] p-1 text-[14px]",\n },\n },\n defaultVariants: {\n size: "sm",\n position: "top-right",\n inset: false,\n },\n compoundVariants: [\n {\n inset: false,\n position: "top-right",\n class: "-translate-y-1/2 translate-x-1/2 transform",\n },\n {\n inset: false,\n position: "bottom-right",\n class: "-translate-x-1/2 translate-y-1/2 transform",\n },\n {\n inset: false,\n position: "top-left",\n class: "-translate-x-1/2 -translate-y-1/2 transform",\n },\n {\n inset: false,\n position: "bottom-left",\n class: "-translate-x-1/2 translate-y-1/2 transform",\n },\n ],\n });\n</script>\n',
506
506
  },
@@ -515,19 +515,19 @@ export default [
515
515
  files: [
516
516
  {
517
517
  fileName: "Collapsible/Collapsible.vue",
518
- dirPath: "components/UI",
518
+ dirPath: "app/components/Ui",
519
519
  fileContent:
520
520
  '<template>\n <CollapsibleRoot v-slot="slotProps" v-bind="forwarded">\n <slot v-bind="slotProps" />\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',
521
521
  },
522
522
  {
523
523
  fileName: "Collapsible/Content.vue",
524
- dirPath: "components/UI",
524
+ dirPath: "app/components/Ui",
525
525
  fileContent:
526
526
  '<template>\n <CollapsibleContent :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\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',
527
527
  },
528
528
  {
529
529
  fileName: "Collapsible/Trigger.vue",
530
- dirPath: "components/UI",
530
+ dirPath: "app/components/Ui",
531
531
  fileContent:
532
532
  '<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',
533
533
  },
@@ -542,67 +542,67 @@ export default [
542
542
  files: [
543
543
  {
544
544
  fileName: "Command/Cancel.vue",
545
- dirPath: "components/UI",
545
+ dirPath: "app/components/Ui",
546
546
  fileContent:
547
547
  '<template>\n <ComboboxCancel v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <Icon name="lucide:x" class="h-4 w-4 text-muted-foreground/70" />\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 & { class?: any }>();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex items-center justify-center",\n });\n</script>\n',
548
548
  },
549
549
  {
550
550
  fileName: "Command/Command.vue",
551
- dirPath: "components/UI",
551
+ dirPath: "app/components/Ui",
552
552
  fileContent:
553
553
  '<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',
554
554
  },
555
555
  {
556
556
  fileName: "Command/Dialog.vue",
557
- dirPath: "components/UI",
557
+ dirPath: "app/components/Ui",
558
558
  fileContent:
559
559
  '<template>\n <UiDialog v-bind="forwarded">\n <UiDialogContent class="overflow-hidden p-0 shadow-lg">\n <UiCommand>\n <slot />\n </UiCommand>\n </UiDialogContent>\n </UiDialog>\n</template>\n\n<script lang="ts" setup>\n import { useForwardPropsEmits } from "radix-vue";\n import type { DialogRootEmits, DialogRootProps } from "radix-vue";\n\n const props = defineProps<DialogRootProps>();\n const emits = defineEmits<DialogRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
560
560
  },
561
561
  {
562
562
  fileName: "Command/Empty.vue",
563
- dirPath: "components/UI",
563
+ dirPath: "app/components/Ui",
564
564
  fileContent:
565
565
  '<template>\n <ComboboxEmpty :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "py-6 text-center text-sm",\n });\n</script>\n',
566
566
  },
567
567
  {
568
568
  fileName: "Command/Group.vue",
569
- dirPath: "components/UI",
569
+ dirPath: "app/components/Ui",
570
570
  fileContent:
571
571
  '<template>\n <ComboboxGroup :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class", "heading");\n const styles = tv({\n base: "overflow-hidden p-1 text-foreground",\n });\n</script>\n',
572
572
  },
573
573
  {
574
574
  fileName: "Command/Input.vue",
575
- dirPath: "components/UI",
575
+ dirPath: "app/components/Ui",
576
576
  fileContent:
577
577
  '<template>\n <div class="flex items-center border-b px-3">\n <Icon :name="icon || \'lucide:search\'" class="mr-2 h-4 w-4 shrink-0 opacity-50" />\n <ComboboxInput\n v-bind="$attrs"\n :type="type ?? \'text\'"\n :disabled="disabled"\n auto-focus\n :class="styles({ class: props.class })"\n />\n <UiCommandCancel v-if="showCancel" />\n </div>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxInput } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<{\n /**Custom class(es) to add to the input element*/\n class?: any;\n /**The icon to render*/\n icon?: string;\n /**The input type*/\n type?: string;\n /**Whether the input is disabled*/\n disabled?: boolean;\n /**Whether to show the cancel button*/\n showCancel?: boolean;\n }>();\n\n const styles = tv({\n base: "flex h-11 w-full rounded-md bg-transparent py-3 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n });\n</script>\n',
578
578
  },
579
579
  {
580
580
  fileName: "Command/Item.vue",
581
- dirPath: "components/UI",
581
+ dirPath: "app/components/Ui",
582
582
  fileContent:
583
583
  '<template>\n <ComboboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <slot name="icon">\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n </slot>\n {{ text }}\n <slot name="shortcut">\n <UiCommandShortcut v-if="shortcut" :shortcut="shortcut" />\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(es) to add to the parent */\n class?: any;\n /** Icon to render */\n icon?: string;\n /** Text to render */\n text?: string;\n /** Shortcut to render */\n shortcut?: string;\n }\n >();\n const emit = defineEmits<ComboboxItemEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "class", "icon", "text", "shortcut"),\n emit\n );\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n });\n</script>\n',
584
584
  },
585
585
  {
586
586
  fileName: "Command/Label.vue",
587
- dirPath: "components/UI",
587
+ dirPath: "app/components/Ui",
588
588
  fileContent:
589
589
  '<template>\n <ComboboxLabel :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>{{ label }}</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 /**\n * Class(es) to pass to the ComboboxLabel component.\n */\n class?: any;\n /**\n * The label to display.\n */\n label?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "label");\n const styles = tv({\n base: "px-2 py-1.5 text-xs font-medium text-muted-foreground",\n });\n</script>\n',
590
590
  },
591
591
  {
592
592
  fileName: "Command/List.vue",
593
- dirPath: "components/UI",
593
+ dirPath: "app/components/Ui",
594
594
  fileContent:
595
595
  '<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',
596
596
  },
597
597
  {
598
598
  fileName: "Command/Separator.vue",
599
- dirPath: "components/UI",
599
+ dirPath: "app/components/Ui",
600
600
  fileContent:
601
601
  '<template>\n <ComboboxSeparator :as-child="asChild" :class="styles({ class: props.class })">\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<\n ComboboxSeparatorProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n const styles = tv({\n base: "-mx-1 h-px bg-border",\n });\n</script>\n',
602
602
  },
603
603
  {
604
604
  fileName: "Command/Shortcut.vue",
605
- dirPath: "components/UI",
605
+ dirPath: "app/components/Ui",
606
606
  fileContent:
607
607
  '<template>\n <Primitive :as="as || \'span\'" :as-child="asChild" :class="styles({ class: props.class })">\n <slot>{{ shortcut }}</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 = defineProps<\n PrimitiveProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /** The shortcut text to render */\n shortcut?: any;\n }\n >();\n const styles = tv({\n base: "ml-auto text-xs tracking-widest text-muted-foreground",\n });\n</script>\n',
608
608
  },
@@ -617,7 +617,7 @@ export default [
617
617
  files: [
618
618
  {
619
619
  fileName: "Container.vue",
620
- dirPath: "components/UI",
620
+ dirPath: "app/components/Ui",
621
621
  fileContent:
622
622
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\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 forwarded = reactiveOmit(props, "class");\n\n const styles = tv({\n base: "container mx-auto",\n });\n</script>\n',
623
623
  },
@@ -632,103 +632,103 @@ export default [
632
632
  files: [
633
633
  {
634
634
  fileName: "ContextMenu/Arrow.vue",
635
- dirPath: "components/UI",
635
+ dirPath: "app/components/Ui",
636
636
  fileContent:
637
637
  '<template>\n <ContextMenuArrow v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuArrow } from "radix-vue";\n import type { ContextMenuArrowProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuArrowProps & {\n /** Custom class(es) to add to teh arrow */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "border bg-muted",\n });\n</script>\n',
638
638
  },
639
639
  {
640
640
  fileName: "ContextMenu/CheckboxItem.vue",
641
- dirPath: "components/UI",
641
+ dirPath: "app/components/Ui",
642
642
  fileContent:
643
643
  '<template>\n <ContextMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiContextMenuItemIndicator icon="lucide:check" />\n </span>\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <slot name="shortcut">\n <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n </slot>\n </ContextMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuCheckboxItem, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuCheckboxItemProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /**The shortcut for the item */\n shortcut?: string;\n /**The title for the item */\n title?: string;\n }\n >();\n\n const emits = defineEmits<ContextMenuCheckboxItemEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "shortcut", "title"), emits);\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n });\n</script>\n',
644
644
  },
645
645
  {
646
646
  fileName: "ContextMenu/Content.vue",
647
- dirPath: "components/UI",
647
+ dirPath: "app/components/Ui",
648
648
  fileContent:
649
649
  '<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',
650
650
  },
651
651
  {
652
652
  fileName: "ContextMenu/ContextMenu.vue",
653
- dirPath: "components/UI",
653
+ dirPath: "app/components/Ui",
654
654
  fileContent:
655
655
  '<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',
656
656
  },
657
657
  {
658
658
  fileName: "ContextMenu/Group.vue",
659
- dirPath: "components/UI",
659
+ dirPath: "app/components/Ui",
660
660
  fileContent:
661
661
  '<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',
662
662
  },
663
663
  {
664
664
  fileName: "ContextMenu/Item.vue",
665
- dirPath: "components/UI",
665
+ dirPath: "app/components/Ui",
666
666
  fileContent:
667
667
  '<template>\n <ContextMenuItem v-bind="forwarded" :class="styles({ inset, class: props.class })">\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <slot name="shortcut">\n <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n </slot>\n </ContextMenuItem>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuItem, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuItemEmits, ContextMenuItemProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuItemProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /** Wether an indentation should be added to the item or not */\n inset?: boolean;\n /** The shortcut for the item */\n shortcut?: string;\n /** The title for the item */\n title?: string;\n }\n >();\n\n const emits = defineEmits<ContextMenuItemEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "class", "inset", "shortcut", "title"),\n emits\n );\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center gap-2.5 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
668
668
  },
669
669
  {
670
670
  fileName: "ContextMenu/ItemIndicator.vue",
671
- dirPath: "components/UI",
671
+ dirPath: "app/components/Ui",
672
672
  fileContent:
673
673
  '<template>\n <ContextMenuItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n </slot>\n </ContextMenuItemIndicator>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuItemIndicator } from "radix-vue";\n import type { ContextMenuItemIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuItemIndicatorProps & {\n /** The icon to display */\n icon?: string;\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n\n const styles = tv({\n base: "flex items-center justify-center",\n });\n</script>\n',
674
674
  },
675
675
  {
676
676
  fileName: "ContextMenu/Label.vue",
677
- dirPath: "components/UI",
677
+ dirPath: "app/components/Ui",
678
678
  fileContent:
679
679
  '<template>\n <ContextMenuLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">\n <slot>{{ label }}</slot>\n </ContextMenuLabel>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuLabel } from "radix-vue";\n import type { ContextMenuLabelProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuLabelProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /** Wether an indentation should be added to the item or not */\n inset?: boolean;\n /** The label for the item */\n label?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "inset", "label");\n const styles = tv({\n base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",\n variants: {\n inset: { true: "pl-8" },\n },\n });\n</script>\n',
680
680
  },
681
681
  {
682
682
  fileName: "ContextMenu/Portal.vue",
683
- dirPath: "components/UI",
683
+ dirPath: "app/components/Ui",
684
684
  fileContent:
685
685
  '<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',
686
686
  },
687
687
  {
688
688
  fileName: "ContextMenu/RadioGroup.vue",
689
- dirPath: "components/UI",
689
+ dirPath: "app/components/Ui",
690
690
  fileContent:
691
691
  '<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',
692
692
  },
693
693
  {
694
694
  fileName: "ContextMenu/RadioItem.vue",
695
- dirPath: "components/UI",
695
+ dirPath: "app/components/Ui",
696
696
  fileContent:
697
697
  '<template>\n <ContextMenuRadioItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiContextMenuItemIndicator>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n <Icon v-else name="ph:circle-fill" class="h-2 w-2" />\n </UiContextMenuItemIndicator>\n </span>\n <slot>{{ title }}</slot>\n </ContextMenuRadioItem>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuRadioItem, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuRadioItemProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /**The icon to display */\n icon?: string;\n /**The title for the item */\n title?: string;\n }\n >();\n\n const emits = defineEmits<ContextMenuRadioItemEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "icon", "title"), emits);\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n });\n</script>\n',
698
698
  },
699
699
  {
700
700
  fileName: "ContextMenu/Separator.vue",
701
- dirPath: "components/UI",
701
+ dirPath: "app/components/Ui",
702
702
  fileContent:
703
703
  '<template>\n <ContextMenuSeparator :class="styles({ class: props.class })" v-bind="props" />\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSeparator } from "radix-vue";\n import type { ContextMenuSeparatorProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuSeparatorProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "-mx-1 my-1 h-px bg-border",\n });\n</script>\n',
704
704
  },
705
705
  {
706
706
  fileName: "ContextMenu/Shortcut.vue",
707
- dirPath: "components/UI",
707
+ dirPath: "app/components/Ui",
708
708
  fileContent:
709
709
  '<template>\n <Primitive :as="as || \'span\'" :as-child="asChild" :class="styles({ class: 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 = defineProps<\n PrimitiveProps & {\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "ml-auto text-xs tracking-widest text-muted-foreground",\n });\n</script>\n',
710
710
  },
711
711
  {
712
712
  fileName: "ContextMenu/Sub.vue",
713
- dirPath: "components/UI",
713
+ dirPath: "app/components/Ui",
714
714
  fileContent:
715
715
  '<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',
716
716
  },
717
717
  {
718
718
  fileName: "ContextMenu/SubContent.vue",
719
- dirPath: "components/UI",
719
+ dirPath: "app/components/Ui",
720
720
  fileContent:
721
721
  '<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',
722
722
  },
723
723
  {
724
724
  fileName: "ContextMenu/SubTrigger.vue",
725
- dirPath: "components/UI",
725
+ dirPath: "app/components/Ui",
726
726
  fileContent:
727
727
  '<template>\n <ContextMenuSubTrigger v-bind="forwarded" :class="styles({ inset, class: props.class })">\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <Icon class="ml-auto h-4 w-4" :name="icon || \'lucide:chevron-right\'" />\n </ContextMenuSubTrigger>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSubTrigger } from "radix-vue";\n import type { ContextMenuSubTriggerProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuSubTriggerProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /** Wether an indentation should be added to the item or not */\n inset?: boolean;\n /** The icon to display */\n icon?: string;\n /** The title for the item */\n title?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "inset", "icon", "title");\n const styles = tv({\n base: "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none 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 variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
728
728
  },
729
729
  {
730
730
  fileName: "ContextMenu/Trigger.vue",
731
- dirPath: "components/UI",
731
+ dirPath: "app/components/Ui",
732
732
  fileContent:
733
733
  '<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',
734
734
  },
@@ -744,7 +744,7 @@ export default [
744
744
  files: [
745
745
  {
746
746
  fileName: "CurrencyInput.vue",
747
- dirPath: "components/UI",
747
+ dirPath: "app/components/Ui",
748
748
  fileContent:
749
749
  '<template>\n <!-- eslint-disable-next-line vue/html-self-closing -->\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',
750
750
  },
@@ -775,7 +775,7 @@ export default [
775
775
  files: [
776
776
  {
777
777
  fileName: "Datatable.client.vue",
778
- dirPath: "components/UI",
778
+ dirPath: "app/components/Ui",
779
779
  fileContent:
780
780
  '<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',
781
781
  },
@@ -790,7 +790,7 @@ export default [
790
790
  files: [
791
791
  {
792
792
  fileName: "DateField.vue",
793
- dirPath: "components/UI",
793
+ dirPath: "app/components/Ui",
794
794
  fileContent:
795
795
  '<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 { DateFieldInput, DateFieldRoot } from "radix-vue";\n import type { DateValue } from "@internationalized/date";\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',
796
796
  },
@@ -810,7 +810,7 @@ export default [
810
810
  files: [
811
811
  {
812
812
  fileName: "Datepicker.vue",
813
- dirPath: "components/UI",
813
+ dirPath: "app/components/Ui",
814
814
  fileContent:
815
815
  '<template>\n <ClientOnly>\n <VDatePicker\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 </VDatePicker>\n </ClientOnly>\n</template>\n\n<script lang="ts" setup>\n import type { Calendar, DatePicker } from "v-calendar";\n\n defineOptions({ inheritAttrs: false });\n\n // @ts-expect-error - This is a hacky way to get the props from the Calendar and DatePicker components\n interface Props\n extends /* @vue-ignore */ Partial<InstanceType<typeof Calendar>["$props"]>,\n /* @vue-ignore */ Omit<Partial<InstanceType<typeof DatePicker>["$props"]>, "attributes"> {}\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 --vc-time-year-color: theme("colors.foreground");\n --vc-time-weekday-color: theme("colors.foreground");\n --vc-time-month-color: theme("colors.foreground");\n --vc-time-day-color: theme("colors.foreground");\n\n --vc-nav-item-active-color: theme("colors.primary.foreground");\n --vc-nav-item-active-bg: theme("colors.primary.DEFAULT");\n\n --vc-time-select-group-bg: theme("colors.background");\n --vc-time-select-group-border: theme("colors.border");\n --vc-time-picker-border: theme("colors.border");\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',
816
816
  },
@@ -825,61 +825,61 @@ export default [
825
825
  files: [
826
826
  {
827
827
  fileName: "Dialog/Close.vue",
828
- dirPath: "components/UI",
828
+ dirPath: "app/components/Ui",
829
829
  fileContent:
830
830
  '<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',
831
831
  },
832
832
  {
833
833
  fileName: "Dialog/Content.vue",
834
- dirPath: "components/UI",
834
+ dirPath: "app/components/Ui",
835
835
  fileContent:
836
- '<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 v-if="!hideClose"\n class="absolute right-4 top-4 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" mode="svg" />\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 max-h-[calc(100%-4rem)] 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',
836
+ '<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 v-if="!hideClose"\n class="absolute right-4 top-4 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" mode="svg" />\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 max-h-[calc(100%-4rem)] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto 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',
837
837
  },
838
838
  {
839
839
  fileName: "Dialog/Description.vue",
840
- dirPath: "components/UI",
840
+ dirPath: "app/components/Ui",
841
841
  fileContent:
842
- '<template>\n <DialogDescription :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>{{ description }}</slot>\n </DialogDescription>\n</template>\n\n<script lang="ts" setup>\n import { DialogDescription } from "radix-vue";\n import type { DialogDescriptionProps } from "radix-vue";\n\n const props = defineProps<\n DialogDescriptionProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The description text */\n description?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "description");\n const styles = tv({\n base: "text-sm text-muted-foreground",\n });\n</script>\n',
842
+ '<template>\n <DialogDescription :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>{{ description }}</slot>\n </DialogDescription>\n</template>\n\n<script lang="ts" setup>\n import { DialogDescription } from "radix-vue";\n import type { DialogDescriptionProps } from "radix-vue";\n\n const props = defineProps<\n DialogDescriptionProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The description text */\n description?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "description");\n const styles = tv({\n base: "text-base text-muted-foreground md:text-sm",\n });\n</script>\n',
843
843
  },
844
844
  {
845
845
  fileName: "Dialog/Dialog.vue",
846
- dirPath: "components/UI",
846
+ dirPath: "app/components/Ui",
847
847
  fileContent:
848
848
  '<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',
849
849
  },
850
850
  {
851
851
  fileName: "Dialog/Footer.vue",
852
- dirPath: "components/UI",
852
+ dirPath: "app/components/Ui",
853
853
  fileContent:
854
854
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2",\n });\n</script>\n',
855
855
  },
856
856
  {
857
857
  fileName: "Dialog/Header.vue",
858
- dirPath: "components/UI",
858
+ dirPath: "app/components/Ui",
859
859
  fileContent:
860
860
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex flex-col space-y-1.5 text-center sm:text-left",\n });\n</script>\n',
861
861
  },
862
862
  {
863
863
  fileName: "Dialog/Overlay.vue",
864
- dirPath: "components/UI",
864
+ dirPath: "app/components/Ui",
865
865
  fileContent:
866
866
  '<template>\n <DialogOverlay :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n import { DialogOverlay } from "radix-vue";\n import type { DialogOverlayProps } from "radix-vue";\n\n const props = defineProps<\n DialogOverlayProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",\n });\n</script>\n',
867
867
  },
868
868
  {
869
869
  fileName: "Dialog/Portal.vue",
870
- dirPath: "components/UI",
870
+ dirPath: "app/components/Ui",
871
871
  fileContent:
872
872
  '<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',
873
873
  },
874
874
  {
875
875
  fileName: "Dialog/Title.vue",
876
- dirPath: "components/UI",
876
+ dirPath: "app/components/Ui",
877
877
  fileContent:
878
- '<template>\n <DialogTitle :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>{{ title }}</slot>\n </DialogTitle>\n</template>\n\n<script lang="ts" setup>\n import { DialogTitle } from "radix-vue";\n import type { DialogTitleProps } from "radix-vue";\n\n const props = defineProps<\n DialogTitleProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The title text */\n title?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "title");\n const styles = tv({\n base: "text-lg font-semibold leading-none tracking-tight",\n });\n</script>\n',
878
+ '<template>\n <DialogTitle :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>{{ title }}</slot>\n </DialogTitle>\n</template>\n\n<script lang="ts" setup>\n import { DialogTitle } from "radix-vue";\n import type { DialogTitleProps } from "radix-vue";\n\n const props = defineProps<\n DialogTitleProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The title text */\n title?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "title");\n const styles = tv({\n base: "text-xl font-semibold leading-none tracking-tight md:text-lg",\n });\n</script>\n',
879
879
  },
880
880
  {
881
881
  fileName: "Dialog/Trigger.vue",
882
- dirPath: "components/UI",
882
+ dirPath: "app/components/Ui",
883
883
  fileContent:
884
884
  '<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',
885
885
  },
@@ -895,7 +895,7 @@ export default [
895
895
  files: [
896
896
  {
897
897
  fileName: "Divider.vue",
898
- dirPath: "components/UI",
898
+ dirPath: "app/components/Ui",
899
899
  fileContent:
900
900
  '<template>\n <Primitive as="div" :class="base({ orientation, type, class: props.class })">\n <Separator :orientation="orientation" :class="border({ orientation, type })" />\n <template v-if="label || icon || avatar || $slots.default">\n <div :class="container({ orientation, type })">\n <slot>\n <slot name="label">\n <span v-if="label" :class="labelClass({ orientation, type })">\n {{ label }}\n </span>\n </slot>\n <slot name="icon">\n <Icon v-if="icon" :name="icon" :class="iconClass({ orientation, type })" />\n </slot>\n <slot name="avatar">\n <UiAvatar v-if="avatar" :src="avatar" />\n </slot>\n </slot>\n </div>\n </template>\n <Separator :orientation="orientation" :class="border({ orientation, type })" />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive, Separator } from "radix-vue";\n\n const props = defineProps<{\n class?: any;\n type?: VariantProps<typeof style>["type"];\n orientation?: VariantProps<typeof style>["orientation"];\n icon?: string;\n label?: string;\n avatar?: string;\n }>();\n\n const style = tv({\n slots: {\n base: "flex w-full items-center text-center align-middle",\n container: "flex font-medium",\n border: "flex border-border",\n icon: "h-5 w-5 shrink-0",\n label: "text-sm",\n },\n variants: {\n orientation: {\n horizontal: {\n base: "flex-row",\n container: "mx-3 whitespace-nowrap",\n border: "w-full border-t",\n },\n vertical: {\n base: "h-full flex-col",\n container: "my-3",\n border: "h-full border-s",\n },\n },\n type: {\n solid: {\n border: "border-solid",\n },\n dashed: {\n border: "border-dashed",\n },\n dotted: {\n border: "border-dotted",\n },\n },\n },\n defaultVariants: {\n orientation: "horizontal",\n type: "solid",\n },\n });\n\n const { base, border, container, icon: iconClass, label: labelClass } = style();\n</script>\n',
901
901
  },
@@ -911,61 +911,61 @@ export default [
911
911
  files: [
912
912
  {
913
913
  fileName: "Drawer/Close.vue",
914
- dirPath: "components/UI",
914
+ dirPath: "app/components/Ui",
915
915
  fileContent:
916
916
  '<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',
917
917
  },
918
918
  {
919
919
  fileName: "Drawer/Content.vue",
920
- dirPath: "components/UI",
920
+ dirPath: "app/components/Ui",
921
921
  fileContent:
922
922
  '<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 class="mx-auto my-5 h-2 w-[60px] shrink-0 cursor-grab rounded-full bg-muted active:cursor-grabbing"\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',
923
923
  },
924
924
  {
925
925
  fileName: "Drawer/Description.vue",
926
- dirPath: "components/UI",
926
+ dirPath: "app/components/Ui",
927
927
  fileContent:
928
928
  '<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',
929
929
  },
930
930
  {
931
931
  fileName: "Drawer/Drawer.vue",
932
- dirPath: "components/UI",
932
+ dirPath: "app/components/Ui",
933
933
  fileContent:
934
934
  '<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',
935
935
  },
936
936
  {
937
937
  fileName: "Drawer/Footer.vue",
938
- dirPath: "components/UI",
938
+ dirPath: "app/components/Ui",
939
939
  fileContent:
940
940
  '<template>\n <Primitive v-bind="forwarded" :class="drawerFooterStyles({ class: props.class })">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts">\n import { reactiveOmit } from "@vueuse/core";\n import { Primitive, useForwardProps } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n export const drawerFooterStyles = tv({\n base: "mt-auto flex flex-col gap-2 p-4",\n });\n\n export type DrawerHeaderProps = PrimitiveProps & {\n /**\n * Classes to add to the parent.\n */\n class?: any;\n };\n</script>\n\n<script lang="ts" setup>\n const props = withDefaults(defineProps<DrawerHeaderProps>(), {\n as: "div",\n });\n const forwarded = useForwardProps(reactiveOmit(props, ["class"]));\n</script>\n',
941
941
  },
942
942
  {
943
943
  fileName: "Drawer/Header.vue",
944
- dirPath: "components/UI",
944
+ dirPath: "app/components/Ui",
945
945
  fileContent:
946
946
  '<template>\n <Primitive v-bind="forwarded" :class="drawerHeaderStyles({ class: props.class })">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts">\n import { reactiveOmit } from "@vueuse/core";\n import { Primitive, useForwardProps } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n export const drawerHeaderStyles = tv({\n base: "grid gap-1.5 p-4 text-center sm:text-left",\n });\n\n export type DrawerHeaderProps = PrimitiveProps & {\n /**\n * Classes to add to the header.\n */\n class?: any;\n };\n</script>\n<script lang="ts" setup>\n const props = withDefaults(defineProps<DrawerHeaderProps>(), {\n as: "div",\n });\n const forwarded = useForwardProps(reactiveOmit(props, ["class"]));\n</script>\n',
947
947
  },
948
948
  {
949
949
  fileName: "Drawer/Overlay.vue",
950
- dirPath: "components/UI",
950
+ dirPath: "app/components/Ui",
951
951
  fileContent:
952
952
  '<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',
953
953
  },
954
954
  {
955
955
  fileName: "Drawer/Portal.vue",
956
- dirPath: "components/UI",
956
+ dirPath: "app/components/Ui",
957
957
  fileContent:
958
958
  '<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',
959
959
  },
960
960
  {
961
961
  fileName: "Drawer/Title.vue",
962
- dirPath: "components/UI",
962
+ dirPath: "app/components/Ui",
963
963
  fileContent:
964
964
  '<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',
965
965
  },
966
966
  {
967
967
  fileName: "Drawer/Trigger.vue",
968
- dirPath: "components/UI",
968
+ dirPath: "app/components/Ui",
969
969
  fileContent:
970
970
  '<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',
971
971
  },
@@ -980,103 +980,103 @@ export default [
980
980
  files: [
981
981
  {
982
982
  fileName: "DropdownMenu/Arrow.vue",
983
- dirPath: "components/UI",
983
+ dirPath: "app/components/Ui",
984
984
  fileContent:
985
985
  '<template>\n <DropdownMenuArrow v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuArrow } from "radix-vue";\n import type { DropdownMenuArrowProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n DropdownMenuArrowProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n asChild: false,\n width: 10,\n height: 5,\n }\n );\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "rotate-45 border bg-muted",\n });\n</script>\n',
986
986
  },
987
987
  {
988
988
  fileName: "DropdownMenu/CheckboxItem.vue",
989
- dirPath: "components/UI",
989
+ dirPath: "app/components/Ui",
990
990
  fileContent:
991
991
  '<template>\n <DropdownMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiDropdownMenuItemIndicator icon="lucide:check" />\n </span>\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <slot name="shortcut">\n <UiDropdownMenuShortcut v-if="shortcut">{{ shortcut }}</UiDropdownMenuShortcut>\n </slot>\n </DropdownMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuCheckboxItem, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "radix-vue";\n\n const props = defineProps<\n DropdownMenuCheckboxItemProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The shorttcut text to display */\n shortcut?: string;\n /** The title text to display */\n title?: string;\n }\n >();\n const emits = defineEmits<DropdownMenuCheckboxItemEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "title", "shortcut", "class"), emits);\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",\n });\n</script>\n',
992
992
  },
993
993
  {
994
994
  fileName: "DropdownMenu/Content.vue",
995
- dirPath: "components/UI",
995
+ dirPath: "app/components/Ui",
996
996
  fileContent:
997
997
  '<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',
998
998
  },
999
999
  {
1000
1000
  fileName: "DropdownMenu/DropdownMenu.vue",
1001
- dirPath: "components/UI",
1001
+ dirPath: "app/components/Ui",
1002
1002
  fileContent:
1003
1003
  '<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',
1004
1004
  },
1005
1005
  {
1006
1006
  fileName: "DropdownMenu/Group.vue",
1007
- dirPath: "components/UI",
1007
+ dirPath: "app/components/Ui",
1008
1008
  fileContent:
1009
1009
  '<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',
1010
1010
  },
1011
1011
  {
1012
1012
  fileName: "DropdownMenu/Item.vue",
1013
- dirPath: "components/UI",
1013
+ dirPath: "app/components/Ui",
1014
1014
  fileContent:
1015
1015
  '<template>\n <DropdownMenuItem v-bind="forwarded" :class="styles({ inset, class: props.class })">\n <slot>\n <slot name="icon">\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n </slot>\n <slot name="title">\n <span v-if="title">{{ title }}</span>\n </slot>\n </slot>\n <slot name="shortcut">\n <UiDropdownMenuShortcut v-if="shortcut">{{ shortcut }}</UiDropdownMenuShortcut>\n </slot>\n </DropdownMenuItem>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuItem, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuItemEmits, DropdownMenuItemProps } from "radix-vue";\n\n const props = defineProps<\n DropdownMenuItemProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** Whether to inset the content */\n inset?: boolean;\n /** The shorttcut text to display */\n shortcut?: string;\n /** The title text to display */\n title?: string;\n /** The icon to display */\n icon?: string;\n }\n >();\n\n const emits = defineEmits<DropdownMenuItemEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "class", "inset", "shortcut", "title", "icon"),\n emits\n );\n\n const styles = tv({\n base: "relative flex cursor-default select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",\n variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
1016
1016
  },
1017
1017
  {
1018
1018
  fileName: "DropdownMenu/ItemIndicator.vue",
1019
- dirPath: "components/UI",
1019
+ dirPath: "app/components/Ui",
1020
1020
  fileContent:
1021
1021
  '<template>\n <DropdownMenuItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n </slot>\n </DropdownMenuItemIndicator>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuItemIndicator } from "radix-vue";\n import type { DropdownMenuItemIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n DropdownMenuItemIndicatorProps & {\n /** The icon to display */\n icon?: string;\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "icon");\n\n const styles = tv({\n base: "flex items-center justify-center",\n });\n</script>\n',
1022
1022
  },
1023
1023
  {
1024
1024
  fileName: "DropdownMenu/Label.vue",
1025
- dirPath: "components/UI",
1025
+ dirPath: "app/components/Ui",
1026
1026
  fileContent:
1027
1027
  '<template>\n <DropdownMenuLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">\n <slot>{{ label }}</slot>\n </DropdownMenuLabel>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuLabel } from "radix-vue";\n import type { DropdownMenuLabelProps } from "radix-vue";\n\n const props = defineProps<\n DropdownMenuLabelProps & {\n class?: any;\n inset?: boolean;\n label?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "inset", "label");\n const styles = tv({\n base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",\n variants: {\n inset: { true: "pl-8" },\n },\n });\n</script>\n',
1028
1028
  },
1029
1029
  {
1030
1030
  fileName: "DropdownMenu/Portal.vue",
1031
- dirPath: "components/UI",
1031
+ dirPath: "app/components/Ui",
1032
1032
  fileContent:
1033
1033
  '<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',
1034
1034
  },
1035
1035
  {
1036
1036
  fileName: "DropdownMenu/RadioGroup.vue",
1037
- dirPath: "components/UI",
1037
+ dirPath: "app/components/Ui",
1038
1038
  fileContent:
1039
1039
  '<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',
1040
1040
  },
1041
1041
  {
1042
1042
  fileName: "DropdownMenu/RadioItem.vue",
1043
- dirPath: "components/UI",
1043
+ dirPath: "app/components/Ui",
1044
1044
  fileContent:
1045
1045
  '<template>\n <DropdownMenuRadioItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiDropdownMenuItemIndicator>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n <Icon v-else name="ph:circle-fill" class="h-2 w-2" />\n </UiDropdownMenuItemIndicator>\n </span>\n <slot>{{ title }}</slot>\n </DropdownMenuRadioItem>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuRadioItem, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "radix-vue";\n\n const props = defineProps<\n DropdownMenuRadioItemProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The icon to display */\n icon?: string;\n /** The title text to display */\n title?: string;\n }\n >();\n\n const emits = defineEmits<DropdownMenuRadioItemEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "icon", "title"), emits);\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",\n });\n</script>\n',
1046
1046
  },
1047
1047
  {
1048
1048
  fileName: "DropdownMenu/Separator.vue",
1049
- dirPath: "components/UI",
1049
+ dirPath: "app/components/Ui",
1050
1050
  fileContent:
1051
1051
  '<template>\n <DropdownMenuSeparator :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuSeparator } from "radix-vue";\n import type { DropdownMenuSeparatorProps } from "radix-vue";\n\n const props = defineProps<\n DropdownMenuSeparatorProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "-mx-1 my-1 h-px bg-border",\n });\n</script>\n',
1052
1052
  },
1053
1053
  {
1054
1054
  fileName: "DropdownMenu/Shortcut.vue",
1055
- dirPath: "components/UI",
1055
+ dirPath: "app/components/Ui",
1056
1056
  fileContent:
1057
1057
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\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: "span",\n }\n );\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "ml-auto text-xs tracking-widest opacity-60",\n });\n</script>\n',
1058
1058
  },
1059
1059
  {
1060
1060
  fileName: "DropdownMenu/Sub.vue",
1061
- dirPath: "components/UI",
1061
+ dirPath: "app/components/Ui",
1062
1062
  fileContent:
1063
1063
  '<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',
1064
1064
  },
1065
1065
  {
1066
1066
  fileName: "DropdownMenu/SubContent.vue",
1067
- dirPath: "components/UI",
1067
+ dirPath: "app/components/Ui",
1068
1068
  fileContent:
1069
1069
  '<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',
1070
1070
  },
1071
1071
  {
1072
1072
  fileName: "DropdownMenu/SubTrigger.vue",
1073
- dirPath: "components/UI",
1073
+ dirPath: "app/components/Ui",
1074
1074
  fileContent:
1075
1075
  '<template>\n <DropdownMenuSubTrigger v-bind="forwarded" :class="styles({ inset, class: props.class })">\n <slot>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n <span v-if="title">{{ title }}</span>\n </slot>\n <Icon\n class="ml-auto h-4 w-4 text-muted-foreground"\n :name="trailingIcon || \'lucide:chevron-right\'"\n />\n </DropdownMenuSubTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuSubTrigger } from "radix-vue";\n import type { DropdownMenuSubTriggerProps } from "radix-vue";\n\n const props = defineProps<\n DropdownMenuSubTriggerProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /** Wether an indentation should be added to the item or not */\n inset?: boolean;\n /** The icon to display */\n icon?: string;\n /** The title for the item */\n title?: string;\n /** The trailing icon to display */\n trailingIcon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "inset", "icon", "title", "trailingIcon");\n const styles = tv({\n base: "flex cursor-default select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",\n variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
1076
1076
  },
1077
1077
  {
1078
1078
  fileName: "DropdownMenu/Trigger.vue",
1079
- dirPath: "components/UI",
1079
+ dirPath: "app/components/Ui",
1080
1080
  fileContent:
1081
1081
  '<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',
1082
1082
  },
@@ -1091,7 +1091,7 @@ export default [
1091
1091
  files: [
1092
1092
  {
1093
1093
  fileName: "Dropfile.vue",
1094
- dirPath: "components/UI",
1094
+ dirPath: "app/components/Ui",
1095
1095
  fileContent:
1096
1096
  '<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/no-unsafe-function-type\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',
1097
1097
  },
@@ -1106,43 +1106,43 @@ export default [
1106
1106
  files: [
1107
1107
  {
1108
1108
  fileName: "Editable/Area.vue",
1109
- dirPath: "components/UI",
1109
+ dirPath: "app/components/Ui",
1110
1110
  fileContent:
1111
1111
  '<template>\n <EditableArea v-bind="props">\n <slot />\n </EditableArea>\n</template>\n\n<script lang="ts" setup>\n import { EditableArea } from "radix-vue";\n import type { EditableAreaProps } from "radix-vue";\n\n const props = defineProps<EditableAreaProps>();\n</script>\n',
1112
1112
  },
1113
1113
  {
1114
1114
  fileName: "Editable/Cancel.vue",
1115
- dirPath: "components/UI",
1115
+ dirPath: "app/components/Ui",
1116
1116
  fileContent:
1117
1117
  '<template>\n <EditableCancelTrigger v-bind="props">\n <slot />\n </EditableCancelTrigger>\n</template>\n\n<script lang="ts" setup>\n import { EditableCancelTrigger } from "radix-vue";\n import type { EditableCancelTriggerProps } from "radix-vue";\n\n const props = defineProps<EditableCancelTriggerProps>();\n</script>\n',
1118
1118
  },
1119
1119
  {
1120
1120
  fileName: "Editable/Edit.vue",
1121
- dirPath: "components/UI",
1121
+ dirPath: "app/components/Ui",
1122
1122
  fileContent:
1123
1123
  '<template>\n <EditableEditTrigger v-bind="props">\n <slot />\n </EditableEditTrigger>\n</template>\n\n<script lang="ts" setup>\n import { EditableEditTrigger } from "radix-vue";\n import type { EditableEditTriggerProps } from "radix-vue";\n\n const props = defineProps<EditableEditTriggerProps>();\n</script>\n',
1124
1124
  },
1125
1125
  {
1126
1126
  fileName: "Editable/Editable.vue",
1127
- dirPath: "components/UI",
1127
+ dirPath: "app/components/Ui",
1128
1128
  fileContent:
1129
1129
  '<template>\n <EditableRoot :ref="forwardRef" v-slot="slotProps" v-bind="forwarded">\n <slot v-bind="slotProps" />\n </EditableRoot>\n</template>\n\n<script lang="ts" setup>\n import { EditableRoot, useForwardExpose, useForwardPropsEmits } from "radix-vue";\n import type { EditableRootEmits, EditableRootProps } from "radix-vue";\n\n const { currentRef, forwardRef } = useForwardExpose();\n const props = defineProps<EditableRootProps>();\n const emit = defineEmits<EditableRootEmits & { ready: [v?: any] }>();\n const forwarded = useForwardPropsEmits(props, emit);\n\n onMounted(() => {\n // Emit the ready event with the current ref value\n emit("ready", currentRef);\n });\n</script>\n',
1130
1130
  },
1131
1131
  {
1132
1132
  fileName: "Editable/Input.vue",
1133
- dirPath: "components/UI",
1133
+ dirPath: "app/components/Ui",
1134
1134
  fileContent:
1135
1135
  '<template>\n <EditableInput v-bind="props">\n <slot />\n </EditableInput>\n</template>\n\n<script lang="ts" setup>\n import { EditableInput } from "radix-vue";\n import type { EditableInputProps } from "radix-vue";\n\n const props = defineProps<EditableInputProps>();\n</script>\n',
1136
1136
  },
1137
1137
  {
1138
1138
  fileName: "Editable/Preview.vue",
1139
- dirPath: "components/UI",
1139
+ dirPath: "app/components/Ui",
1140
1140
  fileContent:
1141
1141
  '<template>\n <EditablePreview v-bind="props">\n <slot />\n </EditablePreview>\n</template>\n\n<script lang="ts" setup>\n import { EditablePreview } from "radix-vue";\n import type { EditablePreviewProps } from "radix-vue";\n\n const props = defineProps<EditablePreviewProps>();\n</script>\n',
1142
1142
  },
1143
1143
  {
1144
1144
  fileName: "Editable/Submit.vue",
1145
- dirPath: "components/UI",
1145
+ dirPath: "app/components/Ui",
1146
1146
  fileContent:
1147
1147
  '<template>\n <EditableSubmitTrigger v-bind="props">\n <slot />\n </EditableSubmitTrigger>\n</template>\n\n<script lang="ts" setup>\n import { EditableSubmitTrigger } from "radix-vue";\n import type { EditableSubmitTriggerProps } from "radix-vue";\n\n const props = defineProps<EditableSubmitTriggerProps>();\n</script>\n',
1148
1148
  },
@@ -1157,7 +1157,7 @@ export default [
1157
1157
  files: [
1158
1158
  {
1159
1159
  fileName: "FancyIcon.vue",
1160
- dirPath: "components/UI",
1160
+ dirPath: "app/components/Ui",
1161
1161
  fileContent:
1162
1162
  '<template>\n <div :class="styles().base({ class: props.class, color, type, size, circle })">\n <slot :styles="styles().icon({ color, type, size, circle })">\n <Icon v-if="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',
1163
1163
  },
@@ -1182,31 +1182,31 @@ export default [
1182
1182
  files: [
1183
1183
  {
1184
1184
  fileName: "Form/Control.vue",
1185
- dirPath: "components/UI",
1185
+ dirPath: "app/components/Ui",
1186
1186
  fileContent:
1187
1187
  '<template>\n <Slot\n :id="formItemId"\n :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"\n :aria-invalid="!!error"\n >\n <slot />\n </Slot>\n</template>\n\n<script lang="ts" setup>\n import { Slot } from "radix-vue";\n\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n</script>\n',
1188
1188
  },
1189
1189
  {
1190
1190
  fileName: "Form/Description.vue",
1191
- dirPath: "components/UI",
1191
+ dirPath: "app/components/Ui",
1192
1192
  fileContent:
1193
1193
  '<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',
1194
1194
  },
1195
1195
  {
1196
1196
  fileName: "Form/Item.vue",
1197
- dirPath: "components/UI",
1197
+ dirPath: "app/components/Ui",
1198
1198
  fileContent:
1199
1199
  '<template>\n <div :class="styles({ class: props.class })" v-bind="$attrs">\n <slot name="label">\n <UiFormLabel v-if="label || hint" :label="label" :hint="hint" />\n </slot>\n <UiFormControl>\n <slot />\n </UiFormControl>\n <slot name="description">\n <UiFormDescription v-if="description" :description="description" />\n </slot>\n <slot name="errorMessage">\n <TransitionSlide tag="p">\n <UiFormMessage v-if="!hideMessage" />\n </TransitionSlide>\n </slot>\n </div>\n</template>\n\n<script lang="ts">\n import type { InjectionKey } from "vue";\n\n export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;\n</script>\n\n<script lang="ts" setup>\n defineOptions({ inheritAttrs: false });\n\n const id = useId();\n provide(FORM_ITEM_INJECTION_KEY, id);\n\n const props = defineProps<{\n class?: any;\n label?: string;\n description?: string;\n hint?: string;\n hideMessage?: boolean;\n }>();\n\n const styles = tv({ base: "space-y-1.5" });\n</script>\n',
1200
1200
  },
1201
1201
  {
1202
1202
  fileName: "Form/Label.vue",
1203
- dirPath: "components/UI",
1203
+ dirPath: "app/components/Ui",
1204
1204
  fileContent:
1205
1205
  '<template>\n <Label\n :class="styles({ error: Boolean(error), class: props.class })"\n :for="formItemId"\n v-bind="$attrs"\n >\n <slot\n >{{ label }}\n <span class="ml-auto font-normal text-muted-foreground/80">{{ hint }}</span></slot\n >\n </Label>\n</template>\n\n<script lang="ts" setup>\n import { Label } from "radix-vue";\n import type { LabelProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = defineProps<LabelProps & { class?: any; label?: string; hint?: string }>();\n\n const { error, formItemId } = useFormField();\n\n const styles = tv({\n base: "flex w-full items-center justify-between text-left text-sm font-medium tracking-tight text-foreground hover:cursor-pointer",\n variants: {\n error: {\n true: "text-destructive",\n },\n },\n });\n</script>\n',
1206
1206
  },
1207
1207
  {
1208
1208
  fileName: "Form/Message.vue",
1209
- dirPath: "components/UI",
1209
+ dirPath: "app/components/Ui",
1210
1210
  fileContent:
1211
1211
  '<template>\n <ErrorMessage\n :id="formMessageId"\n as="p"\n :name="toValue(name)"\n class="text-sm font-medium text-destructive"\n />\n</template>\n\n<script lang="ts" setup>\n const { name, formMessageId } = useFormField();\n</script>\n',
1212
1212
  },
@@ -1220,7 +1220,7 @@ export default [
1220
1220
  files: [
1221
1221
  {
1222
1222
  fileName: "GradientDivider.vue",
1223
- dirPath: "components/UI",
1223
+ dirPath: "app/components/Ui",
1224
1224
  fileContent:
1225
1225
  '<template>\n <Separator v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { Separator } from "radix-vue";\n import type { SeparatorProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n SeparatorProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >(),\n {\n as: "hr",\n }\n );\n\n const forwarded = reactiveOmit(props, "class");\n\n const styles = tv({\n base: \'h-px w-full border-t-0 bg-[linear-gradient(90deg,theme("colors.input/10%"),_theme("colors.input"),_theme("colors.input/10%"))]\',\n });\n</script>\n',
1226
1226
  },
@@ -1235,31 +1235,31 @@ export default [
1235
1235
  files: [
1236
1236
  {
1237
1237
  fileName: "HoverCard/Arrow.vue",
1238
- dirPath: "components/UI",
1238
+ dirPath: "app/components/Ui",
1239
1239
  fileContent:
1240
1240
  '<template>\n <HoverCardArrow :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n import { HoverCardArrow } from "radix-vue";\n import type { HoverCardArrowProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n HoverCardArrowProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n height: 5,\n width: 10,\n }\n );\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "fill-popover",\n });\n</script>\n',
1241
1241
  },
1242
1242
  {
1243
1243
  fileName: "HoverCard/Content.vue",
1244
- dirPath: "components/UI",
1244
+ dirPath: "app/components/Ui",
1245
1245
  fileContent:
1246
1246
  '<template>\n <UiHoverCardPortal :to="to">\n <HoverCardContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\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 const forwarded = reactiveOmit(props, "class", "to");\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',
1247
1247
  },
1248
1248
  {
1249
1249
  fileName: "HoverCard/HoverCard.vue",
1250
- dirPath: "components/UI",
1250
+ dirPath: "app/components/Ui",
1251
1251
  fileContent:
1252
1252
  '<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',
1253
1253
  },
1254
1254
  {
1255
1255
  fileName: "HoverCard/Portal.vue",
1256
- dirPath: "components/UI",
1256
+ dirPath: "app/components/Ui",
1257
1257
  fileContent:
1258
1258
  '<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',
1259
1259
  },
1260
1260
  {
1261
1261
  fileName: "HoverCard/Trigger.vue",
1262
- dirPath: "components/UI",
1262
+ dirPath: "app/components/Ui",
1263
1263
  fileContent:
1264
1264
  '<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',
1265
1265
  },
@@ -1275,7 +1275,7 @@ export default [
1275
1275
  files: [
1276
1276
  {
1277
1277
  fileName: "Input.vue",
1278
- dirPath: "components/UI",
1278
+ dirPath: "app/components/Ui",
1279
1279
  fileContent:
1280
1280
  '<template>\n <!-- eslint-disable-next-line vue/html-self-closing -->\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: "form-input h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:px-1 file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus:border-input focus: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 dark:[color-scheme:dark] sm:text-sm",\n });\n</script>\n',
1281
1281
  },
@@ -1290,7 +1290,7 @@ export default [
1290
1290
  files: [
1291
1291
  {
1292
1292
  fileName: "Kbd.vue",
1293
- dirPath: "components/UI",
1293
+ dirPath: "app/components/Ui",
1294
1294
  fileContent:
1295
1295
  '<template>\n <Primitive :class="styles({ size, variant, class: props.class })" v-bind="forwarded">\n <slot />\n </Primitive>\n</template>\n<script setup lang="ts">\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** The size of the component */\n size?: VariantProps<typeof styles>["size"];\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The variant of the component */\n variant?: VariantProps<typeof styles>["variant"];\n }\n >(),\n {\n as: "kbd",\n size: "sm",\n }\n );\n\n const forwarded = reactiveOmit(props, "class", "size");\n\n const styles = tv({\n base: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md border border-border bg-muted font-sans font-medium",\n variants: {\n size: {\n xs: "h-5 min-h-[16px] px-1 text-[10px]",\n sm: "h-6 min-h-[20px] px-1.5 text-[11px]",\n md: "h-7 min-h-[24px] px-2 text-[12px]",\n },\n variant: {\n solid: "bg-muted",\n outline: "bg-transparent",\n },\n },\n defaultVariants: {\n size: "sm",\n variant: "solid",\n },\n });\n</script>\n',
1296
1296
  },
@@ -1305,7 +1305,7 @@ export default [
1305
1305
  files: [
1306
1306
  {
1307
1307
  fileName: "Label.vue",
1308
- dirPath: "components/UI",
1308
+ dirPath: "app/components/Ui",
1309
1309
  fileContent:
1310
1310
  '<template>\n <Label :class="styles({ class: props.class })" v-bind="forwarded">\n <slot />\n <slot name="hint">\n <span v-if="hint" class="text-muted-foreground">\n {{ hint }}\n </span>\n </slot>\n </Label>\n</template>\n\n<script lang="ts" setup>\n import { Label } from "radix-vue";\n import type { LabelProps } from "radix-vue";\n\n const props = defineProps<\n LabelProps & {\n /** Custom class(es) to add to the label */\n class?: any;\n hint?: string;\n }\n >();\n\n const forwarded = reactiveOmit(props, "class", "hint");\n\n const styles = tv({\n base: "flex items-center justify-between text-[15px] font-medium leading-none hover:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm",\n });\n</script>\n',
1311
1311
  },
@@ -1320,31 +1320,31 @@ export default [
1320
1320
  files: [
1321
1321
  {
1322
1322
  fileName: "List/Content.vue",
1323
- dirPath: "components/UI",
1323
+ dirPath: "app/components/Ui",
1324
1324
  fileContent:
1325
1325
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex flex-col gap-1 leading-none",\n });\n</script>\n',
1326
1326
  },
1327
1327
  {
1328
1328
  fileName: "List/Item.vue",
1329
- dirPath: "components/UI",
1329
+ dirPath: "app/components/Ui",
1330
1330
  fileContent:
1331
1331
  '<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',
1332
1332
  },
1333
1333
  {
1334
1334
  fileName: "List/List.vue",
1335
- dirPath: "components/UI",
1335
+ dirPath: "app/components/Ui",
1336
1336
  fileContent:
1337
1337
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "w-full py-2",\n });\n</script>\n',
1338
1338
  },
1339
1339
  {
1340
1340
  fileName: "List/Subtitle.vue",
1341
- dirPath: "components/UI",
1341
+ dirPath: "app/components/Ui",
1342
1342
  fileContent:
1343
1343
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>{{ subtitle }}</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 /** The subtitle of the component */\n subtitle?: string;\n }\n >(),\n {\n as: "p",\n }\n );\n const forwarded = reactiveOmit(props, "class", "subtitle");\n const styles = tv({\n base: "text-sm text-muted-foreground",\n });\n</script>\n',
1344
1344
  },
1345
1345
  {
1346
1346
  fileName: "List/Title.vue",
1347
- dirPath: "components/UI",
1347
+ dirPath: "app/components/Ui",
1348
1348
  fileContent:
1349
1349
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>{{ title }}</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 /** The title of the component */\n title?: string;\n }\n >(),\n {\n as: "p",\n }\n );\n const forwarded = reactiveOmit(props, "class", "title");\n const styles = tv({\n base: "font-semibold",\n });\n</script>\n',
1350
1350
  },
@@ -1359,49 +1359,49 @@ export default [
1359
1359
  files: [
1360
1360
  {
1361
1361
  fileName: "Listbox/Content.vue",
1362
- dirPath: "components/UI",
1362
+ dirPath: "app/components/Ui",
1363
1363
  fileContent:
1364
1364
  '<template>\n <ListboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <slot />\n </ListboxContent>\n</template>\n\n<script lang="ts" setup>\n import { ListboxContent, useForwardProps } from "radix-vue";\n import type { ListboxContentProps } from "radix-vue";\n\n const props = defineProps<ListboxContentProps & { class?: any }>();\n const forwarded = useForwardProps(reactiveOmit(props));\n\n const styles = tv({\n base: "max-h-[300px] w-full overflow-y-auto rounded-md border bg-popover px-4 py-2",\n });\n</script>\n',
1365
1365
  },
1366
1366
  {
1367
1367
  fileName: "Listbox/Filter.vue",
1368
- dirPath: "components/UI",
1368
+ dirPath: "app/components/Ui",
1369
1369
  fileContent:
1370
1370
  '<template>\n <ListboxFilter v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { ListboxFilter, useForwardPropsEmits } from "radix-vue";\n import type { ListboxFilterEmits, ListboxFilterProps } from "radix-vue";\n\n const props = defineProps<ListboxFilterProps & { class?: any; placeholder?: string }>();\n const emits = defineEmits<ListboxFilterEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), 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',
1371
1371
  },
1372
1372
  {
1373
1373
  fileName: "Listbox/Group.vue",
1374
- dirPath: "components/UI",
1374
+ dirPath: "app/components/Ui",
1375
1375
  fileContent:
1376
1376
  '<template>\n <ListboxGroup v-bind="forwarded">\n <slot />\n </ListboxGroup>\n</template>\n\n<script lang="ts" setup>\n import { ListboxGroup, useForwardPropsEmits } from "radix-vue";\n import type { ListboxGroupProps } from "radix-vue";\n\n const props = defineProps<ListboxGroupProps>();\n const forwarded = useForwardPropsEmits(props);\n</script>\n',
1377
1377
  },
1378
1378
  {
1379
1379
  fileName: "Listbox/GroupLabel.vue",
1380
- dirPath: "components/UI",
1380
+ dirPath: "app/components/Ui",
1381
1381
  fileContent:
1382
1382
  '<template>\n <ListboxGroupLabel v-bind="forwarded" :class="styles({ class: props.class })">\n <slot />\n </ListboxGroupLabel>\n</template>\n\n<script lang="ts" setup>\n import { ListboxGroupLabel, useForwardProps } from "radix-vue";\n import type { ListboxGroupLabelProps } from "radix-vue";\n\n const props = defineProps<ListboxGroupLabelProps & { class?: any }>();\n const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n const styles = tv({\n base: "py-1.5 pl-1 pr-8 text-sm font-semibold",\n });\n</script>\n',
1383
1383
  },
1384
1384
  {
1385
1385
  fileName: "Listbox/Item.vue",
1386
- dirPath: "components/UI",
1386
+ dirPath: "app/components/Ui",
1387
1387
  fileContent:
1388
1388
  '<template>\n <ListboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <slot />\n <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">\n <UiListboxItemIndicator :icon="icon" />\n </span>\n </ListboxItem>\n</template>\n\n<script lang="ts" setup>\n import { ListboxItem, useForwardPropsEmits } from "radix-vue";\n import type { ListboxItemEmits, ListboxItemProps } from "radix-vue";\n\n const props = defineProps<\n ListboxItemProps & {\n class?: any;\n icon?: string;\n }\n >();\n const emits = defineEmits<ListboxItemEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "icon"), emits);\n\n const styles = tv({\n base: "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-3 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:ring-1 data-[highlighted]:ring-border",\n });\n</script>\n',
1389
1389
  },
1390
1390
  {
1391
1391
  fileName: "Listbox/ItemIndicator.vue",
1392
- dirPath: "components/UI",
1392
+ dirPath: "app/components/Ui",
1393
1393
  fileContent:
1394
1394
  '<template>\n <ListboxItemIndicator v-bind="forwarded">\n <slot>\n <Icon :class="styles({ class: props.class })" :name="icon || \'lucide:circle-check\'" />\n </slot>\n </ListboxItemIndicator>\n</template>\n\n<script lang="ts" setup>\n import { ListboxItemIndicator, useForwardPropsEmits } from "radix-vue";\n import type { ListboxItemIndicatorProps } from "radix-vue";\n\n const props = defineProps<ListboxItemIndicatorProps & { class?: any; icon?: string }>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"));\n\n const styles = tv({\n base: "size-5 shrink-0",\n });\n</script>\n',
1395
1395
  },
1396
1396
  {
1397
1397
  fileName: "Listbox/Listbox.vue",
1398
- dirPath: "components/UI",
1398
+ dirPath: "app/components/Ui",
1399
1399
  fileContent:
1400
1400
  '<template>\n <ListboxRoot v-slot="{ modelValue }" v-bind="forwarded" :class="styles({ class: props.class })">\n <slot :model-value="modelValue" />\n </ListboxRoot>\n</template>\n\n<script lang="ts" setup>\n import { ListboxRoot, useForwardPropsEmits } from "radix-vue";\n import type { ListboxRootEmits, ListboxRootProps } from "radix-vue";\n\n const props = defineProps<ListboxRootProps & { class?: any }>();\n const emits = defineEmits<ListboxRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "relative flex flex-col gap-4",\n });\n</script>\n',
1401
1401
  },
1402
1402
  {
1403
1403
  fileName: "Listbox/Virtualizer.vue",
1404
- dirPath: "components/UI",
1404
+ dirPath: "app/components/Ui",
1405
1405
  fileContent:
1406
1406
  '<template>\n <ListboxVirtualizer\n v-slot="{ option }"\n v-bind="forwarded"\n :class="styles({ class: props.class })"\n >\n <slot :option="option" />\n </ListboxVirtualizer>\n</template>\n\n<script lang="ts" setup>\n import { ListboxVirtualizer, useForwardProps } from "radix-vue";\n import type { ListboxVirtualizerProps } from "radix-vue";\n\n const props = defineProps<ListboxVirtualizerProps & { class?: any }>();\n const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n const styles = tv({\n base: "",\n });\n</script>\n',
1407
1407
  },
@@ -1416,109 +1416,109 @@ export default [
1416
1416
  files: [
1417
1417
  {
1418
1418
  fileName: "Menubar/Arrow.vue",
1419
- dirPath: "components/UI",
1419
+ dirPath: "app/components/Ui",
1420
1420
  fileContent:
1421
1421
  '<template>\n <MenubarArrow v-bind="props" />\n</template>\n\n<script lang="ts" setup>\n import { MenubarArrow } from "radix-vue";\n import type { MenubarArrowProps } from "radix-vue";\n\n const props = withDefaults(defineProps<MenubarArrowProps>(), {\n width: 10,\n height: 5,\n });\n</script>\n',
1422
1422
  },
1423
1423
  {
1424
1424
  fileName: "Menubar/CheckboxItem.vue",
1425
- dirPath: "components/UI",
1425
+ dirPath: "app/components/Ui",
1426
1426
  fileContent:
1427
1427
  '<template>\n <MenubarCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiMenubarItemIndicator>\n <Icon :name="icon || \'lucide:check\'" class="h-4 w-4" />\n </UiMenubarItemIndicator>\n </span>\n <slot>{{ title }}</slot>\n <slot name="shortcut">\n <UiMenubarShortcut v-if="shortcut">{{ shortcut }}</UiMenubarShortcut>\n </slot>\n </MenubarCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n import { MenubarCheckboxItem, useForwardPropsEmits } from "radix-vue";\n import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from "radix-vue";\n\n const props = defineProps<\n MenubarCheckboxItemProps & {\n icon?: string;\n class?: any;\n title?: string;\n shortcut?: string;\n }\n >();\n const emits = defineEmits<MenubarCheckboxItemEmits>();\n\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "icon", "class", "title", "shortcut"),\n emits\n );\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus: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',
1428
1428
  },
1429
1429
  {
1430
1430
  fileName: "Menubar/Content.vue",
1431
- dirPath: "components/UI",
1431
+ dirPath: "app/components/Ui",
1432
1432
  fileContent:
1433
1433
  '<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',
1434
1434
  },
1435
1435
  {
1436
1436
  fileName: "Menubar/Group.vue",
1437
- dirPath: "components/UI",
1437
+ dirPath: "app/components/Ui",
1438
1438
  fileContent:
1439
1439
  '<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',
1440
1440
  },
1441
1441
  {
1442
1442
  fileName: "Menubar/Item.vue",
1443
- dirPath: "components/UI",
1443
+ dirPath: "app/components/Ui",
1444
1444
  fileContent:
1445
1445
  '<template>\n <MenubarItem v-bind="forwarded" :class="styles({ inset, class: props.class })">\n <slot>\n <slot name="icon">\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n </slot>\n <slot name="title">\n <span v-if="title">{{ title }}</span>\n </slot>\n </slot>\n <slot name="shortcut">\n <UiMenubarShortcut v-if="shortcut">{{ shortcut }}</UiMenubarShortcut>\n </slot>\n </MenubarItem>\n</template>\n\n<script lang="ts" setup>\n import { MenubarItem, useForwardPropsEmits } from "radix-vue";\n import type { MenubarItemEmits, MenubarItemProps } from "radix-vue";\n\n const props = defineProps<\n MenubarItemProps & {\n inset?: boolean;\n class?: any;\n shortcut?: string;\n title?: string;\n icon?: string;\n }\n >();\n\n const emits = defineEmits<MenubarItemEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "class", "inset", "shortcut", "title", "icon"),\n emits\n );\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
1446
1446
  },
1447
1447
  {
1448
1448
  fileName: "Menubar/ItemIndicator.vue",
1449
- dirPath: "components/UI",
1449
+ dirPath: "app/components/Ui",
1450
1450
  fileContent:
1451
1451
  '<template>\n <MenubarItemIndicator v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n </slot>\n </MenubarItemIndicator>\n</template>\n\n<script lang="ts" setup>\n import { MenubarItemIndicator } from "radix-vue";\n import type { MenubarItemIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n MenubarItemIndicatorProps & {\n /** The icon to display */\n icon?: string;\n /** The class(es) to apply to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "icon");\n const styles = tv({\n base: "flex shrink-0 items-center justify-center",\n });\n</script>\n',
1452
1452
  },
1453
1453
  {
1454
1454
  fileName: "Menubar/Label.vue",
1455
- dirPath: "components/UI",
1455
+ dirPath: "app/components/Ui",
1456
1456
  fileContent:
1457
1457
  '<template>\n <MenubarLabel :class="styles({ inset, class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class", "inset");\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',
1458
1458
  },
1459
1459
  {
1460
1460
  fileName: "Menubar/Menu.vue",
1461
- dirPath: "components/UI",
1461
+ dirPath: "app/components/Ui",
1462
1462
  fileContent:
1463
1463
  '<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',
1464
1464
  },
1465
1465
  {
1466
1466
  fileName: "Menubar/Menubar.vue",
1467
- dirPath: "components/UI",
1467
+ dirPath: "app/components/Ui",
1468
1468
  fileContent:
1469
1469
  '<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',
1470
1470
  },
1471
1471
  {
1472
1472
  fileName: "Menubar/Portal.vue",
1473
- dirPath: "components/UI",
1473
+ dirPath: "app/components/Ui",
1474
1474
  fileContent:
1475
1475
  '<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',
1476
1476
  },
1477
1477
  {
1478
1478
  fileName: "Menubar/RadioGroup.vue",
1479
- dirPath: "components/UI",
1479
+ dirPath: "app/components/Ui",
1480
1480
  fileContent:
1481
1481
  '<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',
1482
1482
  },
1483
1483
  {
1484
1484
  fileName: "Menubar/RadioItem.vue",
1485
- dirPath: "components/UI",
1485
+ dirPath: "app/components/Ui",
1486
1486
  fileContent:
1487
1487
  '<template>\n <MenubarRadioItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiMenubarItemIndicator>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n <Icon v-else name="ph:circle-fill" class="h-2 w-2" />\n </UiMenubarItemIndicator>\n </span>\n <slot>{{ title }}</slot>\n </MenubarRadioItem>\n</template>\n\n<script lang="ts" setup>\n import { MenubarRadioItem, useForwardPropsEmits } from "radix-vue";\n import type { MenubarRadioItemEmits, MenubarRadioItemProps } from "radix-vue";\n\n const props = defineProps<\n MenubarRadioItemProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The icon to display */\n icon?: string;\n /** The title of the component */\n title?: string;\n }\n >();\n\n const emits = defineEmits<MenubarRadioItemEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "icon", "title"), emits);\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus: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',
1488
1488
  },
1489
1489
  {
1490
1490
  fileName: "Menubar/Separator.vue",
1491
- dirPath: "components/UI",
1491
+ dirPath: "app/components/Ui",
1492
1492
  fileContent:
1493
1493
  '<template>\n <MenubarSeparator :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n import { MenubarSeparator } from "radix-vue";\n import type { MenubarSeparatorProps } from "radix-vue";\n\n const props = defineProps<\n MenubarSeparatorProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "-mx-1 my-1 h-px bg-border",\n });\n</script>\n',
1494
1494
  },
1495
1495
  {
1496
1496
  fileName: "Menubar/Shortcut.vue",
1497
- dirPath: "components/UI",
1497
+ dirPath: "app/components/Ui",
1498
1498
  fileContent:
1499
1499
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\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 { as: "span" }\n );\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "ml-auto text-xs tracking-widest opacity-60",\n });\n</script>\n',
1500
1500
  },
1501
1501
  {
1502
1502
  fileName: "Menubar/Sub.vue",
1503
- dirPath: "components/UI",
1503
+ dirPath: "app/components/Ui",
1504
1504
  fileContent:
1505
1505
  '<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',
1506
1506
  },
1507
1507
  {
1508
1508
  fileName: "Menubar/SubContent.vue",
1509
- dirPath: "components/UI",
1509
+ dirPath: "app/components/Ui",
1510
1510
  fileContent:
1511
1511
  '<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',
1512
1512
  },
1513
1513
  {
1514
1514
  fileName: "Menubar/SubTrigger.vue",
1515
- dirPath: "components/UI",
1515
+ dirPath: "app/components/Ui",
1516
1516
  fileContent:
1517
1517
  '<template>\n <MenubarSubTrigger v-bind="forwarded" :class="styles({ inset, class: props.class })">\n <slot>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n <span v-if="title">{{ title }}</span>\n </slot>\n <Icon\n class="ml-auto h-4 w-4 text-muted-foreground"\n :name="trailingIcon || \'lucide:chevron-right\'"\n />\n </MenubarSubTrigger>\n</template>\n\n<script lang="ts" setup>\n import { MenubarSubTrigger } from "radix-vue";\n import type { MenubarSubTriggerProps } from "radix-vue";\n\n const props = defineProps<\n MenubarSubTriggerProps & {\n class?: any;\n inset?: boolean;\n icon?: string;\n title?: string;\n trailingIcon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "inset", "icon", "title", "trailingIcon");\n const styles = tv({\n base: "flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",\n variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
1518
1518
  },
1519
1519
  {
1520
1520
  fileName: "Menubar/Trigger.vue",
1521
- dirPath: "components/UI",
1521
+ dirPath: "app/components/Ui",
1522
1522
  fileContent:
1523
1523
  '<template>\n <MenubarTrigger :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\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',
1524
1524
  },
@@ -1534,7 +1534,7 @@ export default [
1534
1534
  files: [
1535
1535
  {
1536
1536
  fileName: "NativeSelect.vue",
1537
- dirPath: "components/UI",
1537
+ dirPath: "app/components/Ui",
1538
1538
  fileContent:
1539
1539
  '<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',
1540
1540
  },
@@ -1549,7 +1549,7 @@ export default [
1549
1549
  files: [
1550
1550
  {
1551
1551
  fileName: "Navbar.vue",
1552
- dirPath: "components/UI",
1552
+ dirPath: "app/components/Ui",
1553
1553
  fileContent:
1554
1554
  '<template>\n <Primitive :class="styles({ sticky, class: props.class })" v-bind="forwarded">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { reactiveOmit } from "@vueuse/core";\n import { Primitive, useForwardProps } 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 /** Whether the navbar should be sticky */\n sticky?: boolean;\n }\n >(),\n {\n as: "header",\n }\n );\n\n const forwarded = useForwardProps(reactiveOmit(props, "class", "sticky"));\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',
1555
1555
  },
@@ -1564,55 +1564,55 @@ export default [
1564
1564
  files: [
1565
1565
  {
1566
1566
  fileName: "NavigationMenu/Content.vue",
1567
- dirPath: "components/UI",
1567
+ dirPath: "app/components/Ui",
1568
1568
  fileContent:
1569
1569
  '<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',
1570
1570
  },
1571
1571
  {
1572
1572
  fileName: "NavigationMenu/Indicator.vue",
1573
- dirPath: "components/UI",
1573
+ dirPath: "app/components/Ui",
1574
1574
  fileContent:
1575
1575
  '<template>\n <NavigationMenuIndicator v-bind="forwarded" :class="styles({ class: props.class })">\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 const forwarded = reactiveOmit(props, "class");\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',
1576
1576
  },
1577
1577
  {
1578
1578
  fileName: "NavigationMenu/Item.vue",
1579
- dirPath: "components/UI",
1579
+ dirPath: "app/components/Ui",
1580
1580
  fileContent:
1581
1581
  '<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',
1582
1582
  },
1583
1583
  {
1584
1584
  fileName: "NavigationMenu/Link.vue",
1585
- dirPath: "components/UI",
1585
+ dirPath: "app/components/Ui",
1586
1586
  fileContent:
1587
1587
  '<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',
1588
1588
  },
1589
1589
  {
1590
1590
  fileName: "NavigationMenu/List.vue",
1591
- dirPath: "components/UI",
1591
+ dirPath: "app/components/Ui",
1592
1592
  fileContent:
1593
1593
  '<template>\n <NavigationMenuList v-bind="forwarded" :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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "group flex flex-1 list-none items-center justify-center space-x-1",\n });\n</script>\n',
1594
1594
  },
1595
1595
  {
1596
1596
  fileName: "NavigationMenu/NavigationMenu.vue",
1597
- dirPath: "components/UI",
1597
+ dirPath: "app/components/Ui",
1598
1598
  fileContent:
1599
1599
  '<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',
1600
1600
  },
1601
1601
  {
1602
1602
  fileName: "NavigationMenu/Sub.vue",
1603
- dirPath: "components/UI",
1603
+ dirPath: "app/components/Ui",
1604
1604
  fileContent:
1605
1605
  '<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',
1606
1606
  },
1607
1607
  {
1608
1608
  fileName: "NavigationMenu/Trigger.vue",
1609
- dirPath: "components/UI",
1609
+ dirPath: "app/components/Ui",
1610
1610
  fileContent:
1611
1611
  '<template>\n <NavigationMenuTrigger v-bind="forwarded" :class="styles({ class: props.class })">\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 const forwarded = reactiveOmit(props, "class", "icon", "title");\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',
1612
1612
  },
1613
1613
  {
1614
1614
  fileName: "NavigationMenu/Viewport.vue",
1615
- dirPath: "components/UI",
1615
+ dirPath: "app/components/Ui",
1616
1616
  fileContent:
1617
1617
  '<template>\n <div class="absolute left-0 top-full flex justify-center">\n <NavigationMenuViewport\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n />\n </div>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuViewport } from "radix-vue";\n import type { NavigationMenuViewportProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = defineProps<\n NavigationMenuViewportProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",\n });\n</script>\n',
1618
1618
  },
@@ -1628,25 +1628,25 @@ export default [
1628
1628
  files: [
1629
1629
  {
1630
1630
  fileName: "NumberField/Decrement.vue",
1631
- dirPath: "components/UI",
1631
+ dirPath: "app/components/Ui",
1632
1632
  fileContent:
1633
1633
  '<template>\n <NumberFieldDecrement v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <Icon :name="props.icon" />\n </slot>\n </NumberFieldDecrement>\n</template>\n\n<script lang="ts" setup>\n import { NumberFieldDecrement, useForwardProps } from "radix-vue";\n import type { NumberFieldDecrementProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n NumberFieldDecrementProps & {\n class?: any;\n icon?: string;\n }\n >(),\n { icon: "lucide:minus" }\n );\n\n const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n const styles = tv({\n base: "flex h-full shrink-0 items-center justify-center bg-transparent p-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",\n });\n</script>\n',
1634
1634
  },
1635
1635
  {
1636
1636
  fileName: "NumberField/Increment.vue",
1637
- dirPath: "components/UI",
1637
+ dirPath: "app/components/Ui",
1638
1638
  fileContent:
1639
1639
  '<template>\n <NumberFieldIncrement v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <Icon :name="props.icon" />\n </slot>\n </NumberFieldIncrement>\n</template>\n\n<script lang="ts" setup>\n import { NumberFieldIncrement, useForwardProps } from "radix-vue";\n import type { NumberFieldIncrementProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n NumberFieldIncrementProps & {\n class?: any;\n icon?: string;\n }\n >(),\n { icon: "lucide:plus" }\n );\n\n const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n const styles = tv({\n base: "flex h-full shrink-0 items-center justify-center bg-transparent p-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",\n });\n</script>\n',
1640
1640
  },
1641
1641
  {
1642
1642
  fileName: "NumberField/Input.vue",
1643
- dirPath: "components/UI",
1643
+ dirPath: "app/components/Ui",
1644
1644
  fileContent:
1645
1645
  '<template>\n <NumberFieldInput v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { NumberFieldInput, useForwardProps } from "radix-vue";\n import type { NumberFieldInputProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n NumberFieldInputProps & {\n class?: any;\n }\n >(),\n {}\n );\n\n const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n const styles = tv({\n base: "h-full w-full grow bg-transparent text-center text-base placeholder:text-muted-foreground/80 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n });\n</script>\n',
1646
1646
  },
1647
1647
  {
1648
1648
  fileName: "NumberField/NumberField.vue",
1649
- dirPath: "components/UI",
1649
+ dirPath: "app/components/Ui",
1650
1650
  fileContent:
1651
1651
  '<template>\n <NumberFieldRoot\n v-slot="rootSlotProps"\n v-bind="forwarded"\n :class="styles({ class: props.class })"\n >\n <slot v-bind="rootSlotProps">\n <slot name="decrement">\n <UiNumberFieldDecrement />\n </slot>\n <slot name="input">\n <UiNumberFieldInput />\n </slot>\n <slot name="increment">\n <UiNumberFieldIncrement />\n </slot>\n </slot>\n </NumberFieldRoot>\n</template>\n\n<script lang="ts" setup>\n import { NumberFieldRoot, useForwardPropsEmits } from "radix-vue";\n import type { NumberFieldRootEmits, NumberFieldRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n NumberFieldRootProps & {\n class?: any;\n }\n >(),\n {}\n );\n\n const emit = defineEmits<NumberFieldRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emit);\n\n const styles = tv({\n base: "flex h-10 w-full items-center gap-1 rounded-md border border-input bg-background text-base focus-within:border-input 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 sm:text-sm",\n });\n</script>\n',
1652
1652
  },
@@ -1661,49 +1661,49 @@ export default [
1661
1661
  files: [
1662
1662
  {
1663
1663
  fileName: "Pagination/Ellipsis.vue",
1664
- dirPath: "components/UI",
1664
+ dirPath: "app/components/Ui",
1665
1665
  fileContent:
1666
1666
  '<template>\n <PaginationEllipsis v-bind="forwarded">\n <slot>\n <div v-if="icon" class="inline-flex h-9 w-9 items-center justify-center hover:bg-transparent">\n <Icon :name="icon" />\n </div>\n </slot>\n </PaginationEllipsis>\n</template>\n\n<script lang="ts" setup>\n import { PaginationEllipsis } from "radix-vue";\n import type { PaginationEllipsisProps } from "radix-vue";\n\n const props = defineProps<\n PaginationEllipsisProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
1667
1667
  },
1668
1668
  {
1669
1669
  fileName: "Pagination/First.vue",
1670
- dirPath: "components/UI",
1670
+ dirPath: "app/components/Ui",
1671
1671
  fileContent:
1672
1672
  '<template>\n <PaginationFirst v-bind="forwarded">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationFirst>\n</template>\n\n<script lang="ts" setup>\n import { PaginationFirst } from "radix-vue";\n import type { PaginationFirstProps } from "radix-vue";\n\n const props = defineProps<\n PaginationFirstProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
1673
1673
  },
1674
1674
  {
1675
1675
  fileName: "Pagination/Item.vue",
1676
- dirPath: "components/UI",
1676
+ dirPath: "app/components/Ui",
1677
1677
  fileContent:
1678
1678
  '<template>\n <PaginationListItem v-bind="props">\n <slot>\n <UiButton\n variant="outline"\n size="icon-sm"\n class="data-[selected=true]:border-transparent data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"\n >\n {{ value }}\n </UiButton>\n </slot>\n </PaginationListItem>\n</template>\n\n<script lang="ts" setup>\n import { PaginationListItem } from "radix-vue";\n import type { PaginationListItemProps } from "radix-vue";\n\n const props = defineProps<PaginationListItemProps>();\n</script>\n',
1679
1679
  },
1680
1680
  {
1681
1681
  fileName: "Pagination/Last.vue",
1682
- dirPath: "components/UI",
1682
+ dirPath: "app/components/Ui",
1683
1683
  fileContent:
1684
1684
  '<template>\n <PaginationLast v-bind="forwarded">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationLast>\n</template>\n\n<script lang="ts" setup>\n import { PaginationLast } from "radix-vue";\n import type { PaginationLastProps } from "radix-vue";\n\n const props = defineProps<\n PaginationLastProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
1685
1685
  },
1686
1686
  {
1687
1687
  fileName: "Pagination/List.vue",
1688
- dirPath: "components/UI",
1688
+ dirPath: "app/components/Ui",
1689
1689
  fileContent:
1690
1690
  '<template>\n <PaginationList v-slot="{ items }" :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex items-center gap-1",\n });\n</script>\n',
1691
1691
  },
1692
1692
  {
1693
1693
  fileName: "Pagination/Next.vue",
1694
- dirPath: "components/UI",
1694
+ dirPath: "app/components/Ui",
1695
1695
  fileContent:
1696
1696
  '<template>\n <PaginationNext v-bind="props">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationNext>\n</template>\n\n<script lang="ts" setup>\n import { PaginationNext } from "radix-vue";\n import type { PaginationNextProps } from "radix-vue";\n\n const props = defineProps<\n PaginationNextProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n</script>\n',
1697
1697
  },
1698
1698
  {
1699
1699
  fileName: "Pagination/Pagination.vue",
1700
- dirPath: "components/UI",
1700
+ dirPath: "app/components/Ui",
1701
1701
  fileContent:
1702
1702
  '<template>\n <PaginationRoot v-bind="forwarded">\n <slot>\n <UiPaginationList v-slot="{ items }">\n <slot name="first"><UiPaginationFirst as-child :icon="firstIcon" /> </slot>\n <slot name="prev"><UiPaginationPrev as-child :icon="prevIcon" /> </slot>\n\n <template v-for="(page, index) in items" :key="index">\n <UiPaginationItem v-if="page.type === \'page\'" as-child v-bind="page" />\n <UiPaginationEllipsis\n v-else-if="page.type === \'ellipsis\'"\n as-child\n v-bind="page"\n :icon="ellipsisIcon"\n />\n </template>\n <slot name="next"><UiPaginationNext as-child :icon="nextIcon" /> </slot>\n <slot name="last"><UiPaginationLast as-child :icon="lastIcon" /></slot>\n </UiPaginationList>\n </slot>\n </PaginationRoot>\n</template>\n\n<script lang="ts" setup>\n import { PaginationRoot, useForwardPropsEmits } from "radix-vue";\n import type { PaginationRootEmits, PaginationRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PaginationRootProps & {\n ellipsisIcon?: string;\n firstIcon?: string;\n lastIcon?: string;\n nextIcon?: string;\n prevIcon?: string;\n }\n >(),\n {\n defaultPage: 1,\n total: 10,\n itemsPerPage: 10,\n siblingCount: 3,\n showEdges: true,\n ellipsisIcon: "lucide:more-horizontal",\n firstIcon: "lucide:chevrons-left",\n lastIcon: "lucide:chevrons-right",\n nextIcon: "lucide:chevron-right",\n prevIcon: "lucide:chevron-left",\n }\n );\n\n const emits = defineEmits<PaginationRootEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "ellipsisIcon", "firstIcon", "lastIcon", "nextIcon", "prevIcon"),\n emits\n );\n</script>\n',
1703
1703
  },
1704
1704
  {
1705
1705
  fileName: "Pagination/Prev.vue",
1706
- dirPath: "components/UI",
1706
+ dirPath: "app/components/Ui",
1707
1707
  fileContent:
1708
1708
  '<template>\n <PaginationPrev v-bind="forwarded">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationPrev>\n</template>\n\n<script lang="ts" setup>\n import { PaginationPrev } from "radix-vue";\n import type { PaginationPrevProps } from "radix-vue";\n\n const props = defineProps<\n PaginationPrevProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
1709
1709
  },
@@ -1718,13 +1718,13 @@ export default [
1718
1718
  files: [
1719
1719
  {
1720
1720
  fileName: "PinInput/PinInput.vue",
1721
- dirPath: "components/UI",
1721
+ dirPath: "app/components/Ui",
1722
1722
  fileContent:
1723
1723
  '<template>\n <PinInputRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <template v-for="(input, k) in inputCount" :key="k">\n <UiPinInputInput :index="k" />\n <template v-if="k < inputCount - 1">\n <span v-if="separator" class="text-muted-foreground">{{ separator }}</span>\n </template>\n </template>\n </slot>\n </PinInputRoot>\n</template>\n\n<script lang="ts" setup>\n import { PinInputRoot, useForwardPropsEmits } from "radix-vue";\n import type { PinInputRootEmits, PinInputRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PinInputRootProps & {\n /** Custom class(es) to apply to the parent element. */\n class?: any;\n /** The number of inputs to render. @default 4 */\n inputCount?: number;\n /** The separator to render between inputs. @default undefined */\n separator?: string;\n }\n >(),\n {\n inputCount: 4,\n }\n );\n\n const emits = defineEmits<PinInputRootEmits>();\n\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "class", "inputCount", "separator"),\n emits\n );\n const styles = tv({\n base: "flex items-center gap-2",\n });\n</script>\n',
1724
1724
  },
1725
1725
  {
1726
1726
  fileName: "PinInput/PinInputInput.vue",
1727
- dirPath: "components/UI",
1727
+ dirPath: "app/components/Ui",
1728
1728
  fileContent:
1729
1729
  '<template>\n <PinInputInput v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { PinInputInput } from "radix-vue";\n import type { PinInputInputProps } from "radix-vue";\n\n const props = defineProps<\n PinInputInputProps & {\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "h-10 w-10 rounded-md border border-input bg-background p-1 text-center text-base font-medium placeholder:text-sm 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 sm:text-sm",\n });\n</script>\n',
1730
1730
  },
@@ -1739,7 +1739,7 @@ export default [
1739
1739
  files: [
1740
1740
  {
1741
1741
  fileName: "Placeholder.vue",
1742
- dirPath: "components/UI",
1742
+ dirPath: "app/components/Ui",
1743
1743
  fileContent:
1744
1744
  '<template>\n <Primitive :as :as-child :class="placeHolderStyles().wrapper({ class: props.class })">\n <svg :class="placeHolderStyles().svg()" fill="none">\n <defs>\n <pattern\n id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"\n x="0"\n y="0"\n width="10"\n height="10"\n patternUnits="userSpaceOnUse"\n >\n <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />\n </pattern>\n </defs>\n <rect\n stroke="none"\n fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"\n width="100%"\n height="100%"\n />\n </svg>\n\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts">\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n import type { HTMLAttributes } from "vue";\n\n export const placeHolderStyles = tv({\n slots: {\n wrapper:\n "relative flex items-center justify-center overflow-hidden rounded-md border border-dashed px-4 opacity-75",\n svg: "absolute inset-0 size-full stroke-foreground/10",\n },\n });\n</script>\n\n<script lang="ts" setup>\n const props = defineProps<\n PrimitiveProps & {\n /**\n * Additional classes to add to the parent element.\n */\n class?: HTMLAttributes["class"];\n }\n >();\n</script>\n',
1745
1745
  },
@@ -1754,49 +1754,49 @@ export default [
1754
1754
  files: [
1755
1755
  {
1756
1756
  fileName: "Popover/Anchor.vue",
1757
- dirPath: "components/UI",
1757
+ dirPath: "app/components/Ui",
1758
1758
  fileContent:
1759
1759
  '<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',
1760
1760
  },
1761
1761
  {
1762
1762
  fileName: "Popover/Arrow.vue",
1763
- dirPath: "components/UI",
1763
+ dirPath: "app/components/Ui",
1764
1764
  fileContent:
1765
1765
  '<template>\n <PopoverArrow v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n import { PopoverArrow, useForwardProps } from "radix-vue";\n import type { PopoverArrowProps } from "radix-vue";\n\n const props = withDefaults(defineProps<PopoverArrowProps>(), {\n width: 10,\n height: 5,\n });\n\n const forwarded = useForwardProps(props);\n</script>\n',
1766
1766
  },
1767
1767
  {
1768
1768
  fileName: "Popover/Close.vue",
1769
- dirPath: "components/UI",
1769
+ dirPath: "app/components/Ui",
1770
1770
  fileContent:
1771
1771
  '<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',
1772
1772
  },
1773
1773
  {
1774
1774
  fileName: "Popover/Content.vue",
1775
- dirPath: "components/UI",
1775
+ dirPath: "app/components/Ui",
1776
1776
  fileContent:
1777
1777
  '<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',
1778
1778
  },
1779
1779
  {
1780
1780
  fileName: "Popover/Popover.vue",
1781
- dirPath: "components/UI",
1781
+ dirPath: "app/components/Ui",
1782
1782
  fileContent:
1783
1783
  '<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',
1784
1784
  },
1785
1785
  {
1786
1786
  fileName: "Popover/Portal.vue",
1787
- dirPath: "components/UI",
1787
+ dirPath: "app/components/Ui",
1788
1788
  fileContent:
1789
1789
  '<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',
1790
1790
  },
1791
1791
  {
1792
1792
  fileName: "Popover/Trigger.vue",
1793
- dirPath: "components/UI",
1793
+ dirPath: "app/components/Ui",
1794
1794
  fileContent:
1795
1795
  '<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',
1796
1796
  },
1797
1797
  {
1798
1798
  fileName: "Popover/X.vue",
1799
- dirPath: "components/UI",
1799
+ dirPath: "app/components/Ui",
1800
1800
  fileContent:
1801
1801
  '<template>\n <PopoverClose v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <Icon :name="icon" class="h-4 w-4" />\n <span class="sr-only">{{ srText }}</span>\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 = withDefaults(\n defineProps<\n PopoverCloseProps & {\n class?: any;\n icon?: string;\n srText?: string;\n }\n >(),\n {\n icon: "heroicons:x-mark",\n srText: "Close",\n }\n );\n const forwarded = useForwardProps(reactiveOmit(props, "icon", "srText", "class"));\n\n const styles = tv({\n base: "absolute right-4 top-4 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</script>\n',
1802
1802
  },
@@ -1811,13 +1811,13 @@ export default [
1811
1811
  files: [
1812
1812
  {
1813
1813
  fileName: "Progress/Indicator.vue",
1814
- dirPath: "components/UI",
1814
+ dirPath: "app/components/Ui",
1815
1815
  fileContent:
1816
1816
  '<template>\n <ProgressIndicator v-bind="forwarded" :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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "h-full w-full flex-1 rounded-full bg-primary transition-all",\n });\n</script>\n',
1817
1817
  },
1818
1818
  {
1819
1819
  fileName: "Progress/Progress.vue",
1820
- dirPath: "components/UI",
1820
+ dirPath: "app/components/Ui",
1821
1821
  fileContent:
1822
1822
  '<template>\n <ProgressRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <UiProgressIndicator :style="{ transform: `translateX(-${100 - (modelValue || 0)}%)` }" />\n </slot>\n </ProgressRoot>\n</template>\n\n<script lang="ts" setup>\n import { ProgressRoot, useForwardPropsEmits } from "radix-vue";\n import type { ProgressRootEmits, ProgressRootProps } from "radix-vue";\n\n const props = defineProps<\n ProgressRootProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const emits = defineEmits<ProgressRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "relative h-3 w-full overflow-hidden rounded-full bg-secondary",\n });\n</script>\n',
1823
1823
  },
@@ -1832,19 +1832,19 @@ export default [
1832
1832
  files: [
1833
1833
  {
1834
1834
  fileName: "RadioGroup/Indicator.vue",
1835
- dirPath: "components/UI",
1835
+ dirPath: "app/components/Ui",
1836
1836
  fileContent:
1837
1837
  '<template>\n <RadioGroupIndicator v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <Icon :name="icon || \'ph:circle-fill\'" class="h-2.5 w-2.5 fill-current text-current" />\n </slot>\n </RadioGroupIndicator>\n</template>\n\n<script lang="ts" setup>\n import { RadioGroupIndicator } from "radix-vue";\n import type { RadioGroupIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n RadioGroupIndicatorProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** Icon to show */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "icon");\n const styles = tv({\n base: "flex items-center justify-center",\n });\n</script>\n',
1838
1838
  },
1839
1839
  {
1840
1840
  fileName: "RadioGroup/Item.vue",
1841
- dirPath: "components/UI",
1841
+ dirPath: "app/components/Ui",
1842
1842
  fileContent:
1843
1843
  '<template>\n <RadioGroupItem v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <UiRadioGroupIndicator :icon="props.icon" />\n </slot>\n </RadioGroupItem>\n</template>\n\n<script lang="ts" setup>\n import { RadioGroupItem } from "radix-vue";\n import type { RadioGroupItemProps } from "radix-vue";\n\n const props = defineProps<\n RadioGroupItemProps & {\n /** Class to apply to the item */\n class?: any;\n /** Icon to show */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "icon");\n const styles = tv({\n base: "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",\n });\n</script>\n',
1844
1844
  },
1845
1845
  {
1846
1846
  fileName: "RadioGroup/RadioGroup.vue",
1847
- dirPath: "components/UI",
1847
+ dirPath: "app/components/Ui",
1848
1848
  fileContent:
1849
1849
  '<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',
1850
1850
  },
@@ -1859,31 +1859,31 @@ export default [
1859
1859
  files: [
1860
1860
  {
1861
1861
  fileName: "ScrollArea/Corner.vue",
1862
- dirPath: "components/UI",
1862
+ dirPath: "app/components/Ui",
1863
1863
  fileContent:
1864
1864
  '<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',
1865
1865
  },
1866
1866
  {
1867
1867
  fileName: "ScrollArea/ScrollArea.vue",
1868
- dirPath: "components/UI",
1868
+ dirPath: "app/components/Ui",
1869
1869
  fileContent:
1870
1870
  '<template>\n <ScrollAreaRoot v-bind="forwarded" :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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "relative overflow-hidden",\n });\n</script>\n',
1871
1871
  },
1872
1872
  {
1873
1873
  fileName: "ScrollArea/Scrollbar.vue",
1874
- dirPath: "components/UI",
1874
+ dirPath: "app/components/Ui",
1875
1875
  fileContent:
1876
1876
  '<template>\n <ScrollAreaScrollbar v-bind="forwarded" :class="styles({ orientation, class: props.class })">\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 const forwarded = reactiveOmit(props, "class");\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',
1877
1877
  },
1878
1878
  {
1879
1879
  fileName: "ScrollArea/Thumb.vue",
1880
- dirPath: "components/UI",
1880
+ dirPath: "app/components/Ui",
1881
1881
  fileContent:
1882
1882
  '<template>\n <ScrollAreaThumb v-bind="forwarded" :class="styles({ orientation, class: props.class })">\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 const forwarded = reactiveOmit(props, "class");\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',
1883
1883
  },
1884
1884
  {
1885
1885
  fileName: "ScrollArea/Viewport.vue",
1886
- dirPath: "components/UI",
1886
+ dirPath: "app/components/Ui",
1887
1887
  fileContent:
1888
1888
  '<template>\n <ScrollAreaViewport v-bind="forwarded" :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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "h-full w-full rounded-[inherit]",\n });\n</script>\n',
1889
1889
  },
@@ -1898,97 +1898,97 @@ export default [
1898
1898
  files: [
1899
1899
  {
1900
1900
  fileName: "Select/Arrow.vue",
1901
- dirPath: "components/UI",
1901
+ dirPath: "app/components/Ui",
1902
1902
  fileContent:
1903
1903
  '<template>\n <SelectArrow v-bind="useForwardProps(props)" />\n</template>\n\n<script lang="ts" setup>\n import { SelectArrow, useForwardProps } from "radix-vue";\n import type { SelectArrowProps } from "radix-vue";\n\n const props = withDefaults(defineProps<SelectArrowProps>(), {\n width: 10,\n height: 5,\n });\n</script>\n',
1904
1904
  },
1905
1905
  {
1906
1906
  fileName: "Select/Content.vue",
1907
- dirPath: "components/UI",
1907
+ dirPath: "app/components/Ui",
1908
1908
  fileContent:
1909
1909
  '<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',
1910
1910
  },
1911
1911
  {
1912
1912
  fileName: "Select/Group.vue",
1913
- dirPath: "components/UI",
1913
+ dirPath: "app/components/Ui",
1914
1914
  fileContent:
1915
1915
  '<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',
1916
1916
  },
1917
1917
  {
1918
1918
  fileName: "Select/Icon.vue",
1919
- dirPath: "components/UI",
1919
+ dirPath: "app/components/Ui",
1920
1920
  fileContent:
1921
1921
  '<template>\n <SelectIcon v-bind="forwarded" class="flex items-center justify-center">\n <slot>\n <Icon :class="styles({ class: props.class })" :name="icon || \'lucide:chevrons-up-down\'" />\n </slot>\n </SelectIcon>\n</template>\n\n<script lang="ts" setup>\n import { SelectIcon, useForwardProps } from "radix-vue";\n import type { SelectIconProps } from "radix-vue";\n\n const props = defineProps<\n SelectIconProps & {\n /** Icon to render */\n icon?: string;\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n const styles = tv({\n base: "h-4 w-4 shrink-0 text-muted-foreground opacity-70",\n });\n</script>\n',
1922
1922
  },
1923
1923
  {
1924
1924
  fileName: "Select/Item.vue",
1925
- dirPath: "components/UI",
1925
+ dirPath: "app/components/Ui",
1926
1926
  fileContent:
1927
1927
  '<template>\n <SelectItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">\n <UiSelectItemIndicator :icon="icon" />\n </span>\n <UiSelectItemText>\n <slot>{{ text }}</slot>\n </UiSelectItemText>\n </SelectItem>\n</template>\n\n<script lang="ts" setup>\n import { SelectItem } from "radix-vue";\n import type { SelectItemProps } from "radix-vue";\n\n const props = defineProps<\n SelectItemProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** Icon to show */\n icon?: string;\n /** Text to show */\n text?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "icon", "text");\n const styles = tv({\n base: "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",\n });\n</script>\n',
1928
1928
  },
1929
1929
  {
1930
1930
  fileName: "Select/ItemIndicator.vue",
1931
- dirPath: "components/UI",
1931
+ dirPath: "app/components/Ui",
1932
1932
  fileContent:
1933
1933
  '<template>\n <SelectItemIndicator v-bind="forwarded" class="flex items-center justify-center">\n <slot>\n <Icon :class="styles({ class: props.class })" :name="icon || \'lucide:check\'" />\n </slot>\n </SelectItemIndicator>\n</template>\n\n<script lang="ts" setup>\n import { SelectItemIndicator } from "radix-vue";\n import type { SelectItemIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n SelectItemIndicatorProps & {\n /** Icon to render */\n icon?: string;\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "icon");\n const styles = tv({\n base: "h-4 w-4",\n });\n</script>\n',
1934
1934
  },
1935
1935
  {
1936
1936
  fileName: "Select/ItemText.vue",
1937
- dirPath: "components/UI",
1937
+ dirPath: "app/components/Ui",
1938
1938
  fileContent:
1939
1939
  '<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',
1940
1940
  },
1941
1941
  {
1942
1942
  fileName: "Select/Label.vue",
1943
- dirPath: "components/UI",
1943
+ dirPath: "app/components/Ui",
1944
1944
  fileContent:
1945
1945
  '<template>\n <SelectLabel :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "py-1.5 pl-8 pr-2 text-sm font-semibold",\n });\n</script>\n',
1946
1946
  },
1947
1947
  {
1948
1948
  fileName: "Select/Portal.vue",
1949
- dirPath: "components/UI",
1949
+ dirPath: "app/components/Ui",
1950
1950
  fileContent:
1951
1951
  '<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',
1952
1952
  },
1953
1953
  {
1954
1954
  fileName: "Select/ScrollDownButton.vue",
1955
- dirPath: "components/UI",
1955
+ dirPath: "app/components/Ui",
1956
1956
  fileContent:
1957
1957
  '<template>\n <SelectScrollDownButton v-bind="forwarded">\n <slot> <Icon :name="icon || \'lucide:chevron-down\'" class="h-5 w-5" /></slot>\n </SelectScrollDownButton>\n</template>\n\n<script lang="ts" setup>\n import { SelectScrollDownButton } from "radix-vue";\n import type { SelectScrollDownButtonProps } from "radix-vue";\n\n const props = defineProps<\n SelectScrollDownButtonProps & {\n /** Icon to render */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
1958
1958
  },
1959
1959
  {
1960
1960
  fileName: "Select/ScrollUpButton.vue",
1961
- dirPath: "components/UI",
1961
+ dirPath: "app/components/Ui",
1962
1962
  fileContent:
1963
1963
  '<template>\n <SelectScrollUpButton v-bind="forwarded">\n <slot>\n <Icon :name="icon || \'lucide:chevron-up\'" class="h-5 w-5" />\n </slot>\n </SelectScrollUpButton>\n</template>\n\n<script lang="ts" setup>\n import { SelectScrollUpButton } from "radix-vue";\n import type { SelectScrollUpButtonProps } from "radix-vue";\n\n const props = defineProps<\n SelectScrollUpButtonProps & {\n /** Icon to render */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
1964
1964
  },
1965
1965
  {
1966
1966
  fileName: "Select/Select.vue",
1967
- dirPath: "components/UI",
1967
+ dirPath: "app/components/Ui",
1968
1968
  fileContent:
1969
1969
  '<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',
1970
1970
  },
1971
1971
  {
1972
1972
  fileName: "Select/Separator.vue",
1973
- dirPath: "components/UI",
1973
+ dirPath: "app/components/Ui",
1974
1974
  fileContent:
1975
1975
  '<template>\n <SelectSeparator :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n import { SelectSeparator } from "radix-vue";\n import type { SelectSeparatorProps } from "radix-vue";\n\n const props = defineProps<\n SelectSeparatorProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "-mx-1 my-1 h-px bg-muted",\n });\n</script>\n',
1976
1976
  },
1977
1977
  {
1978
1978
  fileName: "Select/Trigger.vue",
1979
- dirPath: "components/UI",
1979
+ dirPath: "app/components/Ui",
1980
1980
  fileContent:
1981
1981
  '<template>\n <SelectTrigger :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>\n <UiSelectValue :placeholder="placeholder" />\n </slot>\n <UiSelectIcon :icon="icon" />\n </SelectTrigger>\n</template>\n\n<script lang="ts" setup>\n import { SelectTrigger } from "radix-vue";\n import type { SelectTriggerProps } from "radix-vue";\n\n const props = defineProps<\n SelectTriggerProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** Icon to render */\n icon?: string;\n /** Placeholder text */\n placeholder?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "icon", "placeholder");\n const styles = tv({\n base: "line-clamp-1 flex h-10 w-full items-center justify-between truncate rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground",\n });\n</script>\n',
1982
1982
  },
1983
1983
  {
1984
1984
  fileName: "Select/Value.vue",
1985
- dirPath: "components/UI",
1985
+ dirPath: "app/components/Ui",
1986
1986
  fileContent:
1987
1987
  '<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',
1988
1988
  },
1989
1989
  {
1990
1990
  fileName: "Select/Viewport.vue",
1991
- dirPath: "components/UI",
1991
+ dirPath: "app/components/Ui",
1992
1992
  fileContent:
1993
1993
  '<template>\n <SelectViewport :class="styles({ position, class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\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',
1994
1994
  },
@@ -2003,7 +2003,7 @@ export default [
2003
2003
  files: [
2004
2004
  {
2005
2005
  fileName: "Separator.vue",
2006
- dirPath: "components/UI",
2006
+ dirPath: "app/components/Ui",
2007
2007
  fileContent:
2008
2008
  '<template>\n <Separator v-bind="forwarded" :class="styles({ orientation, class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { Separator, useForwardProps } from "radix-vue";\n import type { SeparatorProps } from "radix-vue";\n\n const props = withDefaults(defineProps<SeparatorProps & { class?: any }>(), {\n orientation: "horizontal",\n });\n\n const forwarded = useForwardProps(reactiveOmit(props, "class"));\n\n const styles = tv({\n base: "shrink-0 bg-border",\n variants: {\n orientation: {\n horizontal: "h-[1px] w-full",\n vertical: "h-full w-[1px]",\n },\n },\n });\n</script>\n',
2009
2009
  },
@@ -2018,67 +2018,67 @@ export default [
2018
2018
  files: [
2019
2019
  {
2020
2020
  fileName: "Sheet/Close.vue",
2021
- dirPath: "components/UI",
2021
+ dirPath: "app/components/Ui",
2022
2022
  fileContent:
2023
2023
  '<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',
2024
2024
  },
2025
2025
  {
2026
2026
  fileName: "Sheet/Content.vue",
2027
- dirPath: "components/UI",
2027
+ dirPath: "app/components/Ui",
2028
2028
  fileContent:
2029
2029
  '<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',
2030
2030
  },
2031
2031
  {
2032
2032
  fileName: "Sheet/Description.vue",
2033
- dirPath: "components/UI",
2033
+ dirPath: "app/components/Ui",
2034
2034
  fileContent:
2035
2035
  '<template>\n <DialogDescription :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>{{ description }}</slot>\n </DialogDescription>\n</template>\n\n<script lang="ts" setup>\n import { DialogDescription } from "radix-vue";\n import type { DialogDescriptionProps } from "radix-vue";\n\n const props = defineProps<\n DialogDescriptionProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n /** Description text */\n description?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "description");\n const styles = tv({\n base: "text-sm text-muted-foreground",\n });\n</script>\n',
2036
2036
  },
2037
2037
  {
2038
2038
  fileName: "Sheet/Footer.vue",
2039
- dirPath: "components/UI",
2039
+ dirPath: "app/components/Ui",
2040
2040
  fileContent:
2041
2041
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n });\n</script>\n',
2042
2042
  },
2043
2043
  {
2044
2044
  fileName: "Sheet/Header.vue",
2045
- dirPath: "components/UI",
2045
+ dirPath: "app/components/Ui",
2046
2046
  fileContent:
2047
2047
  '<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex flex-col space-y-2 text-center sm:text-left",\n });\n</script>\n',
2048
2048
  },
2049
2049
  {
2050
2050
  fileName: "Sheet/Overlay.vue",
2051
- dirPath: "components/UI",
2051
+ dirPath: "app/components/Ui",
2052
2052
  fileContent:
2053
2053
  '<template>\n <DialogOverlay :class="styles({ class: props.class })" v-bind="forwarded" />\n</template>\n\n<script lang="ts" setup>\n import { DialogOverlay } from "radix-vue";\n import type { DialogOverlayProps } from "radix-vue";\n\n const props = defineProps<\n DialogOverlayProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",\n });\n</script>\n',
2054
2054
  },
2055
2055
  {
2056
2056
  fileName: "Sheet/Portal.vue",
2057
- dirPath: "components/UI",
2057
+ dirPath: "app/components/Ui",
2058
2058
  fileContent:
2059
2059
  '<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',
2060
2060
  },
2061
2061
  {
2062
2062
  fileName: "Sheet/Sheet.vue",
2063
- dirPath: "components/UI",
2063
+ dirPath: "app/components/Ui",
2064
2064
  fileContent:
2065
2065
  '<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',
2066
2066
  },
2067
2067
  {
2068
2068
  fileName: "Sheet/Title.vue",
2069
- dirPath: "components/UI",
2069
+ dirPath: "app/components/Ui",
2070
2070
  fileContent:
2071
2071
  '<template>\n <DialogTitle :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>{{ title }}</slot>\n </DialogTitle>\n</template>\n\n<script lang="ts" setup>\n import { DialogTitle } from "radix-vue";\n import type { DialogTitleProps } from "radix-vue";\n\n const props = defineProps<\n DialogTitleProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n /** Title text */\n title?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "title");\n const styles = tv({\n base: "text-lg font-semibold text-foreground",\n });\n</script>\n',
2072
2072
  },
2073
2073
  {
2074
2074
  fileName: "Sheet/Trigger.vue",
2075
- dirPath: "components/UI",
2075
+ dirPath: "app/components/Ui",
2076
2076
  fileContent:
2077
2077
  '<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',
2078
2078
  },
2079
2079
  {
2080
2080
  fileName: "Sheet/X.vue",
2081
- dirPath: "components/UI",
2081
+ dirPath: "app/components/Ui",
2082
2082
  fileContent:
2083
2083
  '<template>\n <DialogClose :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>\n <Icon :name="icon" class="h-4 w-4" />\n <span class="sr-only">{{ srText }}</span>\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 = withDefaults(\n defineProps<\n DialogCloseProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n /** Icon to display */\n icon?: string;\n /** Screen reader text */\n srText?: string;\n }\n >(),\n {\n icon: "heroicons:x-mark",\n srText: "Close",\n }\n );\n const forwarded = reactiveOmit(props, "class", "icon", "srText");\n const styles = tv({\n base: "absolute right-4 top-4 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</script>\n',
2084
2084
  },
@@ -2093,144 +2093,144 @@ export default [
2093
2093
  files: [
2094
2094
  {
2095
2095
  fileName: "Sidebar/Content.vue",
2096
- dirPath: "components/UI",
2096
+ dirPath: "app/components/Ui",
2097
2097
  fileContent:
2098
2098
  '<template>\n <div data-sidebar="content" :class="sideBarContentStyles({ class: props.class })">\n <slot />\n </div>\n</template>\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarContentStyles = tv({\n base: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the sidebar content.\n */\n class?: HTMLAttributes["class"];\n }>();\n</script>\n',
2099
2099
  },
2100
2100
  {
2101
2101
  fileName: "Sidebar/Footer.vue",
2102
- dirPath: "components/UI",
2102
+ dirPath: "app/components/Ui",
2103
2103
  fileContent:
2104
2104
  '<template>\n <div data-sidebar="footer" :class="sideBarFooterStyles({ class: props.class })">\n <slot />\n </div>\n</template>\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarFooterStyles = tv({\n base: "flex flex-col gap-2 p-2",\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n</script>\n',
2105
2105
  },
2106
2106
  {
2107
2107
  fileName: "Sidebar/Group.vue",
2108
- dirPath: "components/UI",
2108
+ dirPath: "app/components/Ui",
2109
2109
  fileContent:
2110
2110
  '<template>\n <div data-sidebar="group" :class="sideBarGroupStyles({ class: props.class })">\n <slot />\n </div>\n</template>\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarGroupStyles = tv({\n base: "relative flex w-full min-w-0 flex-col p-2",\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n</script>\n',
2111
2111
  },
2112
2112
  {
2113
2113
  fileName: "Sidebar/GroupAction.vue",
2114
- dirPath: "components/UI",
2114
+ dirPath: "app/components/Ui",
2115
2115
  fileContent:
2116
2116
  '<template>\n <Primitive\n data-sidebar="group-action"\n :as="as"\n :as-child="asChild"\n :class="sideBarGroupActionStyles({ class: props.class })"\n >\n <slot />\n </Primitive>\n</template>\n<script lang="ts">\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n import type { HTMLAttributes } from "vue";\n\n export const sideBarGroupActionStyles = tv({\n base: "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 group-data-[collapsible=icon]:hidden after:md:hidden [&>svg]:size-4 [&>svg]:shrink-0",\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<\n PrimitiveProps & {\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }\n >();\n</script>\n',
2117
2117
  },
2118
2118
  {
2119
2119
  fileName: "Sidebar/GroupContent.vue",
2120
- dirPath: "components/UI",
2120
+ dirPath: "app/components/Ui",
2121
2121
  fileContent:
2122
2122
  '<template>\n <div data-sidebar="group-content" :class="sideBarGroupContentStyles({ class: props.class })">\n <slot />\n </div>\n</template>\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarGroupContentStyles = tv({\n base: "w-full text-sm",\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n</script>\n',
2123
2123
  },
2124
2124
  {
2125
2125
  fileName: "Sidebar/GroupLabel.vue",
2126
- dirPath: "components/UI",
2126
+ dirPath: "app/components/Ui",
2127
2127
  fileContent:
2128
2128
  '<template>\n <Primitive\n data-sidebar="group-label"\n :as="as"\n :as-child="asChild"\n :class="sideBarGroupLabelStyles({ class: props.class })"\n >\n <slot>{{ props.label }}</slot>\n </Primitive>\n</template>\n<script lang="ts">\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n import type { HTMLAttributes } from "vue";\n\n export const sideBarGroupLabelStyles = tv({\n base: "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/50 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0",\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<\n PrimitiveProps & {\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n /**\n * The label for the group.\n */\n label?: string;\n }\n >();\n</script>\n',
2129
2129
  },
2130
2130
  {
2131
2131
  fileName: "Sidebar/Header.vue",
2132
- dirPath: "components/UI",
2132
+ dirPath: "app/components/Ui",
2133
2133
  fileContent:
2134
2134
  '<template>\n <div data-sidebar="header" :class="sideBarHeaderStyles({ class: props.class })">\n <slot />\n </div>\n</template>\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarHeaderStyles = tv({\n base: "flex flex-col gap-2 p-2",\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n</script>\n',
2135
2135
  },
2136
2136
  {
2137
2137
  fileName: "Sidebar/Input.vue",
2138
- dirPath: "components/UI",
2138
+ dirPath: "app/components/Ui",
2139
2139
  fileContent:
2140
2140
  '<template>\n <UiInput v-model="model" data-sidebar="input" :class="sideBarInputStyles({ class: props.class })">\n <slot />\n </UiInput>\n</template>\n\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarInputStyles = tv({\n base: "h-8 w-full border-sidebar-input bg-sidebar shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n\n const model = defineModel<any>();\n</script>\n',
2141
2141
  },
2142
2142
  {
2143
2143
  fileName: "Sidebar/Inset.vue",
2144
- dirPath: "components/UI",
2144
+ dirPath: "app/components/Ui",
2145
2145
  fileContent:
2146
2146
  '<template>\n <main :class="sideBarInsetStyles({ class: props.class })">\n <slot />\n </main>\n</template>\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarInsetStyles = tv({\n base: "relative flex min-h-svh flex-1 flex-col bg-background peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n</script>\n',
2147
2147
  },
2148
2148
  {
2149
2149
  fileName: "Sidebar/Menu.vue",
2150
- dirPath: "components/UI",
2150
+ dirPath: "app/components/Ui",
2151
2151
  fileContent:
2152
2152
  '<template>\n <ul data-sidebar="menu" :class="sideBarMenuStyles({ class: props.class })">\n <slot />\n </ul>\n</template>\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarMenuStyles = tv({\n base: "flex w-full min-w-0 flex-col gap-1",\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n</script>\n',
2153
2153
  },
2154
2154
  {
2155
2155
  fileName: "Sidebar/MenuAction.vue",
2156
- dirPath: "components/UI",
2156
+ dirPath: "app/components/Ui",
2157
2157
  fileContent:
2158
2158
  '<template>\n <Primitive\n data-sidebar="menu-action"\n :class="sideBarMenuAction({ showOnHover, class: props.class })"\n :as="as"\n :as-child="asChild"\n >\n <slot />\n </Primitive>\n</template>\n<script lang="ts">\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n import type { VariantProps } from "tailwind-variants";\n import type { HTMLAttributes } from "vue";\n\n export const sideBarMenuAction = tv({\n base: [\n "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",\n // Increases the hit area of the button on mobile.\n "after:absolute after:-inset-2 after:md:hidden",\n "peer-data-[size=sm]/menu-button:top-1",\n "peer-data-[size=default]/menu-button:top-1.5",\n "peer-data-[size=lg]/menu-button:top-2.5",\n "group-data-[collapsible=icon]:hidden",\n ],\n variants: {\n showOnHover: {\n true: "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",\n },\n },\n });\n\n export type SidebarMenuActionProps = PrimitiveProps & {\n /**\n * Whether the menu should be shown on hover.\n */\n showOnHover?: VariantProps<typeof sideBarMenuAction>["showOnHover"];\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n };\n</script>\n<script setup lang="ts">\n const props = withDefaults(defineProps<SidebarMenuActionProps>(), {\n as: "button",\n });\n</script>\n',
2159
2159
  },
2160
2160
  {
2161
2161
  fileName: "Sidebar/MenuBadge.vue",
2162
- dirPath: "components/UI",
2162
+ dirPath: "app/components/Ui",
2163
2163
  fileContent:
2164
2164
  '<template>\n <div data-sidebar="menu-badge" :class="sideBarMenuBadgeStyles({ class: props.class })">\n <slot />\n </div>\n</template>\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarMenuBadgeStyles = tv({\n base: [\n "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",\n "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",\n "peer-data-[size=sm]/menu-button:top-1",\n "peer-data-[size=default]/menu-button:top-1.5",\n "peer-data-[size=lg]/menu-button:top-2.5",\n "group-data-[collapsible=icon]:hidden",\n ],\n });\n</script>\n\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n</script>\n',
2165
2165
  },
2166
2166
  {
2167
2167
  fileName: "Sidebar/MenuButton.vue",
2168
- dirPath: "components/UI",
2168
+ dirPath: "app/components/Ui",
2169
2169
  fileContent:
2170
2170
  '<template>\n <UiSidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">\n <slot />\n </UiSidebarMenuButtonChild>\n\n <UiTooltip v-else>\n <UiTooltipTrigger as-child>\n <UiSidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">\n <slot />\n </UiSidebarMenuButtonChild>\n </UiTooltipTrigger>\n <UiTooltipContent side="right" align="center" :hidden="state !== \'collapsed\' || isMobile">\n <template v-if="typeof tooltip === \'string\'">\n {{ tooltip }}\n </template>\n <component :is="tooltip" v-else />\n </UiTooltipContent>\n </UiTooltip>\n</template>\n\n<script lang="ts">\n import type { SidebarMenuButtonProps } from "./MenuButtonChild.vue";\n import type { Component } from "vue";\n</script>\n<script setup lang="ts">\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n SidebarMenuButtonProps & {\n tooltip?: string | Component;\n }\n >(),\n {\n as: "button",\n variant: "default",\n size: "default",\n }\n );\n\n const { isMobile, state } = useSidebar();\n\n const delegatedProps = computed(() => {\n const { tooltip, ...delegated } = props;\n return delegated;\n });\n</script>\n',
2171
2171
  },
2172
2172
  {
2173
2173
  fileName: "Sidebar/MenuButtonChild.vue",
2174
- dirPath: "components/UI",
2174
+ dirPath: "app/components/Ui",
2175
2175
  fileContent:
2176
2176
  '<template>\n <Primitive\n data-sidebar="menu-button"\n :data-size="size"\n :data-active="isActive"\n :class="sidebarMenuButtonVariants({ variant, size, class: props.class })"\n :as="as"\n :as-child="asChild"\n v-bind="$attrs"\n >\n <slot />\n </Primitive>\n</template>\n<script lang="ts">\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n import type { HTMLAttributes } from "vue";\n\n export interface SidebarMenuButtonProps extends PrimitiveProps {\n /**\n * The variant of the button.\n * @default "default"\n */\n variant?: SidebarMenuButtonVariants["variant"];\n /**\n * The size of the button.\n * @default "default"\n */\n size?: SidebarMenuButtonVariants["size"];\n /**\n * Whether the button is active.\n */\n isActive?: boolean;\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }\n</script>\n\n<script setup lang="ts">\n const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n as: "button",\n variant: "default",\n size: "default",\n });\n</script>\n',
2177
2177
  },
2178
2178
  {
2179
2179
  fileName: "Sidebar/MenuItem.vue",
2180
- dirPath: "components/UI",
2180
+ dirPath: "app/components/Ui",
2181
2181
  fileContent:
2182
2182
  '<template>\n <li data-sidebar="menu-item" :class="sideBarMenuItemStyles({ class: props.class })">\n <slot />\n </li>\n</template>\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarMenuItemStyles = tv({\n base: "group/menu-item relative",\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n</script>\n',
2183
2183
  },
2184
2184
  {
2185
2185
  fileName: "Sidebar/MenuSkeleton.vue",
2186
- dirPath: "components/UI",
2186
+ dirPath: "app/components/Ui",
2187
2187
  fileContent:
2188
2188
  '<template>\n <div\n data-sidebar="menu-skeleton"\n :class="sideBarMenuSkeletonStyles().wrapper({ class: props.class })"\n >\n <UiSkeleton\n v-if="showIcon"\n :class="sideBarMenuSkeletonStyles().skeleton1()"\n data-sidebar="menu-skeleton-icon"\n />\n\n <UiSkeleton\n :class="sideBarMenuSkeletonStyles().skeleton2()"\n data-sidebar="menu-skeleton-text"\n :style="{ \'--skeleton-width\': width }"\n />\n </div>\n</template>\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarMenuSkeletonStyles = tv({\n slots: {\n wrapper: "flex h-8 items-center gap-2 rounded-md px-2",\n skeleton1: "size-4 rounded-md",\n skeleton2: "h-4 max-w-[--skeleton-width] flex-1",\n },\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Whether to show the icon skeleton.\n */\n showIcon?: boolean;\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n\n const width = computed(() => {\n return `${Math.floor(Math.random() * 40) + 50}%`;\n });\n</script>\n',
2189
2189
  },
2190
2190
  {
2191
2191
  fileName: "Sidebar/MenuSub.vue",
2192
- dirPath: "components/UI",
2192
+ dirPath: "app/components/Ui",
2193
2193
  fileContent:
2194
2194
  '<template>\n <ul data-sidebar="menu-badge" :class="sideBarMenuSubStyles({ class: props.class })">\n <slot />\n </ul>\n</template>\n\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarMenuSubStyles = tv({\n base: [\n "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",\n "group-data-[collapsible=icon]:hidden",\n ],\n });\n</script>\n\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n</script>\n',
2195
2195
  },
2196
2196
  {
2197
2197
  fileName: "Sidebar/MenuSubButton.vue",
2198
- dirPath: "components/UI",
2198
+ dirPath: "app/components/Ui",
2199
2199
  fileContent:
2200
2200
  '<template>\n <Primitive\n data-sidebar="menu-sub-button"\n :as="as"\n :as-child="asChild"\n :data-size="size"\n :data-active="isActive"\n :class="sideBarMenuSubButtonStyles({ size, class: props.class })"\n >\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts">\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n import type { VariantProps } from "tailwind-variants";\n import type { HTMLAttributes } from "vue";\n\n export const sideBarMenuSubButtonStyles = tv({\n base: [\n "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",\n "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",\n "group-data-[collapsible=icon]:hidden",\n ],\n variants: {\n size: {\n sm: "text-xs",\n md: "text-sm",\n },\n },\n });\n\n export type SideBarMenuSubButtonProps = PrimitiveProps & {\n /**\n * The size of the button.\n * @default "md"\n */\n size?: VariantProps<typeof sideBarMenuSubButtonStyles>["size"];\n /**\n * Whether the button is active.\n */\n isActive?: boolean;\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n };\n</script>\n\n<script setup lang="ts">\n const props = withDefaults(defineProps<SideBarMenuSubButtonProps>(), {\n as: "a",\n size: "md",\n });\n</script>\n',
2201
2201
  },
2202
2202
  {
2203
2203
  fileName: "Sidebar/MenuSubItem.vue",
2204
- dirPath: "components/UI",
2204
+ dirPath: "app/components/Ui",
2205
2205
  fileContent: "<template>\n <li>\n <slot />\n </li>\n</template>\n",
2206
2206
  },
2207
2207
  {
2208
2208
  fileName: "Sidebar/Provider.vue",
2209
- dirPath: "components/UI",
2209
+ dirPath: "app/components/Ui",
2210
2210
  fileContent:
2211
2211
  '<template>\n <UiTooltipProvider :delay-duration="0">\n <div\n :style="{\n \'--sidebar-width\': SIDEBAR_WIDTH,\n \'--sidebar-width-icon\': SIDEBAR_WIDTH_ICON,\n }"\n :class="sideBarProviderStyles({ class: props.class })"\n >\n <slot v-bind="{ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }" />\n </div>\n </UiTooltipProvider>\n</template>\n\n<script lang="ts">\n import type { HTMLAttributes, Ref } from "vue";\n\n export const sideBarProviderStyles = tv({\n base: "group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar",\n });\n</script>\n\n<script setup lang="ts">\n const props = withDefaults(\n defineProps<{\n /**\n * Default open state of the sidebar.\n * @default true\n */\n defaultOpen?: boolean;\n /**\n * Open state of the sidebar (controlled).\n * @default undefined\n */\n open?: boolean;\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>(),\n {\n defaultOpen: true,\n open: undefined,\n }\n );\n\n // This sets the cookie to keep the sidebar state.\n const SIDEBAR_COOKIE = useCookie<boolean>(SIDEBAR_COOKIE_NAME, {\n path: "/",\n maxAge: SIDEBAR_COOKIE_MAX_AGE,\n default: () => false,\n });\n\n const emits = defineEmits<{\n "update:open": [open: boolean];\n }>();\n\n const isMobile = useMediaQuery("(max-width: 768px)");\n const openMobile = ref(false);\n\n const open = useVModel(props, "open", emits, {\n defaultValue: props.defaultOpen ? props.defaultOpen : SIDEBAR_COOKIE.value,\n passive: (props.open === undefined) as false,\n }) as Ref<boolean>;\n\n function setOpen(value: boolean) {\n open.value = value; // emits(\'update:open\', value)\n SIDEBAR_COOKIE.value = value;\n }\n\n function setOpenMobile(value: boolean) {\n openMobile.value = value;\n }\n\n // Helper to toggle the sidebar.\n function toggleSidebar() {\n return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);\n }\n\n useEventListener("keydown", (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n });\n\n // We add a state so that we can do data-state="expanded" or "collapsed".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = computed(() => (open.value ? "expanded" : "collapsed"));\n\n provideSidebarContext({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n });\n</script>\n',
2212
2212
  },
2213
2213
  {
2214
2214
  fileName: "Sidebar/Rail.vue",
2215
- dirPath: "components/UI",
2215
+ dirPath: "app/components/Ui",
2216
2216
  fileContent:
2217
2217
  '<template>\n <button\n data-sidebar="rail"\n aria-label="Toggle Sidebar"\n :tabindex="-1"\n title="Toggle Sidebar"\n :class="sideBarRailStyles({ class: props.class })"\n @click="toggleSidebar"\n >\n <slot />\n </button>\n</template>\n\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarRailStyles = tv({\n base: [\n "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",\n "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",\n "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",\n "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",\n "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",\n "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",\n ],\n });\n</script>\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n\n const { toggleSidebar } = useSidebar();\n</script>\n',
2218
2218
  },
2219
2219
  {
2220
2220
  fileName: "Sidebar/Separator.vue",
2221
- dirPath: "components/UI",
2221
+ dirPath: "app/components/Ui",
2222
2222
  fileContent:
2223
2223
  '<template>\n <UiSeparator data-sidebar="separator" :class="sideBarSeparatorStyles({ class: props.class })">\n <slot />\n </UiSeparator>\n</template>\n\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarSeparatorStyles = tv({\n base: "mx-2 w-auto bg-sidebar-border",\n });\n</script>\n\n<script setup lang="ts">\n const props = defineProps<{\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n }>();\n</script>\n',
2224
2224
  },
2225
2225
  {
2226
2226
  fileName: "Sidebar/Sidebar.vue",
2227
- dirPath: "components/UI",
2227
+ dirPath: "app/components/Ui",
2228
2228
  fileContent:
2229
2229
  '<template>\n <div\n v-if="collapsible === \'none\'"\n :class="sideBarStyles().collapsible({ class: props.class })"\n v-bind="$attrs"\n >\n <slot />\n </div>\n\n <UiSheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">\n <UiSheetContent\n data-sidebar="sidebar"\n data-mobile="true"\n :side="side"\n :class="sideBarStyles().mobileSheet()"\n :style="{\n \'--sidebar-width\': SIDEBAR_WIDTH_MOBILE,\n }"\n >\n <VisuallyHidden>\n <UiSheetTitle>Mobile Sidebar</UiSheetTitle>\n <UiSheetDescription>\n This is the mobile sidebar. You can use this to navigate the site.\n </UiSheetDescription>\n </VisuallyHidden>\n <div :class="sideBarStyles().mobileInner()">\n <slot />\n </div>\n </UiSheetContent>\n </UiSheet>\n\n <div\n v-else\n class="group peer hidden md:block"\n :data-state="state"\n :data-collapsible="state === \'collapsed\' ? collapsible : \'\'"\n :data-variant="variant"\n :data-side="side"\n >\n <!-- This is what handles the sidebar gap on desktop -->\n <div :class="sideBarStyles().sideBarWrapper({ variant })" />\n <div\n :class="sideBarStyles().sideBarWrapper2({ collapsible, side, variant, class: props.class })"\n v-bind="$attrs"\n >\n <div data-sidebar="sidebar" :class="sideBarStyles().sideBarInner()">\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<script lang="ts">\n import { VisuallyHidden } from "radix-vue";\n import type { VariantProps } from "tailwind-variants";\n import type { HTMLAttributes } from "vue";\n\n export const sideBarStyles = tv({\n slots: {\n collapsible: "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",\n mobileSheet: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",\n mobileInner: "flex h-full w-full flex-col",\n sideBarWrapper:\n "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180",\n sideBarWrapper2:\n "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",\n sideBarInner:\n "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",\n },\n variants: {\n side: {\n left: {\n sideBarWrapper2:\n "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",\n },\n right: {\n sideBarWrapper2:\n "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",\n },\n },\n variant: {\n sidebar: {\n sideBarWrapper: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",\n sideBarWrapper2:\n "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",\n },\n floating: {\n sideBarWrapper:\n "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",\n sideBarWrapper2:\n "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",\n },\n inset: {\n sideBarWrapper:\n "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",\n sideBarWrapper2:\n "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",\n },\n },\n collapsible: {\n offcanvas: {},\n icon: {},\n none: {},\n },\n },\n defaultVariants: {\n side: "left",\n variant: "sidebar",\n collapsible: "offcanvas",\n },\n });\n\n export type SideBarProps = {\n /**\n * The side that the sidebar is on\n * @default "left"\n */\n side?: VariantProps<typeof sideBarStyles>["side"];\n /**\n * The variant of the sidebar\n * @default "sidebar"\n */\n variant?: VariantProps<typeof sideBarStyles>["variant"];\n /**\n * The collapsible state of the sidebar\n * @default "offcanvas"\n */\n collapsible?: VariantProps<typeof sideBarStyles>["collapsible"];\n /**\n * Additional classes to add to the sidebar\n */\n class?: HTMLAttributes["class"];\n };\n</script>\n<script setup lang="ts">\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(defineProps<SideBarProps>(), {\n side: "left",\n variant: "sidebar",\n collapsible: "offcanvas",\n });\n\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n</script>\n',
2230
2230
  },
2231
2231
  {
2232
2232
  fileName: "Sidebar/Trigger.vue",
2233
- dirPath: "components/UI",
2233
+ dirPath: "app/components/Ui",
2234
2234
  fileContent:
2235
2235
  '<template>\n <UiButton\n :title="label"\n data-sidebar="trigger"\n variant="ghost"\n size="icon"\n :class="sideBarTriggerStyles({ class: props.class })"\n @click="toggleSidebar"\n >\n <slot v-bind="{ state }">\n <Icon v-if="icon" :name="icon" />\n <span class="sr-only">{{ label }}</span>\n </slot>\n </UiButton>\n</template>\n\n<script lang="ts">\n import type { HTMLAttributes } from "vue";\n\n export const sideBarTriggerStyles = tv({\n base: "size-7",\n });\n</script>\n\n<script setup lang="ts">\n const props = withDefaults(\n defineProps<{\n /**\n * The icon to display in the trigger.\n * @default "lucide:panel-left"\n */\n icon?: string;\n /**\n * Additional classes to apply to the parent element.\n */\n class?: HTMLAttributes["class"];\n /**\n * The label for the trigger.\n * @default "Toggle Sidebar"\n */\n label?: string;\n }>(),\n {\n icon: "lucide:panel-left",\n label: "Toggle Sidebar",\n }\n );\n\n const { toggleSidebar, state } = useSidebar();\n</script>\n',
2236
2236
  },
@@ -2253,7 +2253,7 @@ export default [
2253
2253
  files: [
2254
2254
  {
2255
2255
  fileName: "Skeleton.vue",
2256
- dirPath: "components/UI",
2256
+ dirPath: "app/components/Ui",
2257
2257
  fileContent:
2258
2258
  '<template>\n <Primitive :class="styles({ loading, class: props.class })" v-bind="forwarded">\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\n const forwarded = reactiveOmit(props, "class", "loading");\n</script>\n',
2259
2259
  },
@@ -2268,25 +2268,25 @@ export default [
2268
2268
  files: [
2269
2269
  {
2270
2270
  fileName: "Slider/Range.vue",
2271
- dirPath: "components/UI",
2271
+ dirPath: "app/components/Ui",
2272
2272
  fileContent:
2273
2273
  '<template>\n <SliderRange :class="styles({ class: props.class })" v-bind="forwarded">\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 forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "absolute h-full bg-primary",\n });\n</script>\n',
2274
2274
  },
2275
2275
  {
2276
2276
  fileName: "Slider/Slider.vue",
2277
- dirPath: "components/UI",
2277
+ dirPath: "app/components/Ui",
2278
2278
  fileContent:
2279
2279
  '<template>\n <SliderRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot :props="props">\n <slot name="track" :props="props">\n <UiSliderTrack>\n <slot name="range" :props="props">\n <UiSliderRange />\n </slot>\n </UiSliderTrack>\n </slot>\n <slot name="thumb" :props="props">\n <UiSliderThumb v-for="(t, i) in modelValue.length" :key="i" />\n </slot>\n </slot>\n </SliderRoot>\n</template>\n\n<script lang="ts" setup>\n import { SliderRoot, useForwardPropsEmits } from "radix-vue";\n import type { SliderRootEmits, SliderRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n SliderRootProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >(),\n {\n orientation: "horizontal",\n min: 0,\n step: 1,\n max: 100,\n modelValue: () => [0],\n }\n );\n\n const emits = defineEmits<SliderRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "relative flex w-full touch-none select-none items-center",\n });\n</script>\n',
2280
2280
  },
2281
2281
  {
2282
2282
  fileName: "Slider/Thumb.vue",
2283
- dirPath: "components/UI",
2283
+ dirPath: "app/components/Ui",
2284
2284
  fileContent:
2285
2285
  '<template>\n <SliderThumb :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\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',
2286
2286
  },
2287
2287
  {
2288
2288
  fileName: "Slider/Track.vue",
2289
- dirPath: "components/UI",
2289
+ dirPath: "app/components/Ui",
2290
2290
  fileContent:
2291
2291
  '<template>\n <SliderTrack :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary",\n });\n</script>\n',
2292
2292
  },
@@ -2301,19 +2301,19 @@ export default [
2301
2301
  files: [
2302
2302
  {
2303
2303
  fileName: "Splitter/Splitter.vue",
2304
- dirPath: "components/UI",
2304
+ dirPath: "app/components/Ui",
2305
2305
  fileContent:
2306
2306
  '<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',
2307
2307
  },
2308
2308
  {
2309
2309
  fileName: "Splitter/Panel.vue",
2310
- dirPath: "components/UI",
2310
+ dirPath: "app/components/Ui",
2311
2311
  fileContent:
2312
2312
  '<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',
2313
2313
  },
2314
2314
  {
2315
2315
  fileName: "Splitter/Handle.vue",
2316
- dirPath: "components/UI",
2316
+ dirPath: "app/components/Ui",
2317
2317
  fileContent:
2318
2318
  '<template>\n <SplitterResizeHandle v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <div\n v-if="withHandle"\n class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"\n >\n <Icon :name="icon" class="h-2.5 w-2.5" />\n </div>\n </slot>\n </SplitterResizeHandle>\n</template>\n\n<script lang="ts" setup>\n import { SplitterResizeHandle, useForwardPropsEmits } from "radix-vue";\n import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n SplitterResizeHandleProps & {\n direction?: "horizontal" | "vertical";\n class?: any;\n withHandle?: boolean;\n icon?: string;\n }\n >(),\n {\n direction: "horizontal",\n icon: "lucide:grip-vertical",\n }\n );\n\n const emit = defineEmits<SplitterResizeHandleEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "withHandle", "icon"), emit);\n\n const styles = tv({\n base: "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90",\n });\n</script>\n',
2319
2319
  },
@@ -2328,43 +2328,43 @@ export default [
2328
2328
  files: [
2329
2329
  {
2330
2330
  fileName: "Stepper/Description.vue",
2331
- dirPath: "components/UI",
2331
+ dirPath: "app/components/Ui",
2332
2332
  fileContent:
2333
2333
  '<template>\n <StepperDescription v-slot="slotProps" v-bind="props">\n <slot v-bind="slotProps" />\n </StepperDescription>\n</template>\n\n<script lang="ts" setup>\n import { StepperDescription } from "radix-vue";\n import type { StepperDescriptionProps } from "radix-vue";\n\n const props = defineProps<StepperDescriptionProps>();\n</script>\n',
2334
2334
  },
2335
2335
  {
2336
2336
  fileName: "Stepper/Indicator.vue",
2337
- dirPath: "components/UI",
2337
+ dirPath: "app/components/Ui",
2338
2338
  fileContent:
2339
2339
  '<template>\n <StepperIndicator v-bind="props">\n <slot />\n </StepperIndicator>\n</template>\n\n<script lang="ts" setup>\n import { StepperIndicator } from "radix-vue";\n import type { StepperIndicatorProps } from "radix-vue";\n\n const props = defineProps<StepperIndicatorProps>();\n</script>\n',
2340
2340
  },
2341
2341
  {
2342
2342
  fileName: "Stepper/Item.vue",
2343
- dirPath: "components/UI",
2343
+ dirPath: "app/components/Ui",
2344
2344
  fileContent:
2345
2345
  '<template>\n <StepperItem v-slot="slotProps" v-bind="props">\n <slot v-bind="slotProps" />\n </StepperItem>\n</template>\n\n<script lang="ts" setup>\n import { StepperItem } from "radix-vue";\n import type { StepperItemProps } from "radix-vue";\n\n const props = defineProps<StepperItemProps>();\n</script>\n',
2346
2346
  },
2347
2347
  {
2348
2348
  fileName: "Stepper/Separator.vue",
2349
- dirPath: "components/UI",
2349
+ dirPath: "app/components/Ui",
2350
2350
  fileContent:
2351
2351
  '<template>\n <StepperSeparator v-bind="props">\n <slot />\n </StepperSeparator>\n</template>\n\n<script lang="ts" setup>\n import { StepperSeparator } from "radix-vue";\n import type { StepperSeparatorProps } from "radix-vue";\n\n const props = defineProps<StepperSeparatorProps>();\n</script>\n',
2352
2352
  },
2353
2353
  {
2354
2354
  fileName: "Stepper/Stepper.vue",
2355
- dirPath: "components/UI",
2355
+ dirPath: "app/components/Ui",
2356
2356
  fileContent:
2357
2357
  '<template>\n <StepperRoot v-slot="slotProps" v-bind="forwarded">\n <slot v-bind="slotProps" />\n </StepperRoot>\n</template>\n\n<script lang="ts" setup>\n import { StepperRoot, useForwardPropsEmits } from "radix-vue";\n import type { StepperRootEmits, StepperRootProps } from "radix-vue";\n\n const props = defineProps<StepperRootProps>();\n const emit = defineEmits<StepperRootEmits>();\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
2358
2358
  },
2359
2359
  {
2360
2360
  fileName: "Stepper/Title.vue",
2361
- dirPath: "components/UI",
2361
+ dirPath: "app/components/Ui",
2362
2362
  fileContent:
2363
2363
  '<template>\n <StepperTitle v-bind="props">\n <slot />\n </StepperTitle>\n</template>\n\n<script lang="ts" setup>\n import { StepperTitle } from "radix-vue";\n import type { StepperTitleProps } from "radix-vue";\n\n const props = defineProps<StepperTitleProps>();\n</script>\n',
2364
2364
  },
2365
2365
  {
2366
2366
  fileName: "Stepper/Trigger.vue",
2367
- dirPath: "components/UI",
2367
+ dirPath: "app/components/Ui",
2368
2368
  fileContent:
2369
2369
  '<template>\n <StepperTrigger v-bind="props">\n <slot />\n </StepperTrigger>\n</template>\n\n<script lang="ts" setup>\n import { StepperTrigger } from "radix-vue";\n import type { StepperTriggerProps } from "radix-vue";\n\n const props = defineProps<StepperTriggerProps>();\n</script>\n',
2370
2370
  },
@@ -2379,13 +2379,13 @@ export default [
2379
2379
  files: [
2380
2380
  {
2381
2381
  fileName: "Switch/Switch.vue",
2382
- dirPath: "components/UI",
2382
+ dirPath: "app/components/Ui",
2383
2383
  fileContent:
2384
2384
  '<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',
2385
2385
  },
2386
2386
  {
2387
2387
  fileName: "Switch/Thumb.vue",
2388
- dirPath: "components/UI",
2388
+ dirPath: "app/components/Ui",
2389
2389
  fileContent:
2390
2390
  '<template>\n <SwitchThumb :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\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',
2391
2391
  },
@@ -2400,55 +2400,55 @@ export default [
2400
2400
  files: [
2401
2401
  {
2402
2402
  fileName: "Table/Body.vue",
2403
- dirPath: "components/UI",
2403
+ dirPath: "app/components/Ui",
2404
2404
  fileContent:
2405
2405
  '<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',
2406
2406
  },
2407
2407
  {
2408
2408
  fileName: "Table/Caption.vue",
2409
- dirPath: "components/UI",
2409
+ dirPath: "app/components/Ui",
2410
2410
  fileContent:
2411
2411
  '<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',
2412
2412
  },
2413
2413
  {
2414
2414
  fileName: "Table/Cell.vue",
2415
- dirPath: "components/UI",
2415
+ dirPath: "app/components/Ui",
2416
2416
  fileContent:
2417
2417
  '<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 [&:has([role=checkbox])]:pr-0",\n });\n</script>\n',
2418
2418
  },
2419
2419
  {
2420
2420
  fileName: "Table/Empty.vue",
2421
- dirPath: "components/UI",
2421
+ dirPath: "app/components/Ui",
2422
2422
  fileContent:
2423
2423
  '<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',
2424
2424
  },
2425
2425
  {
2426
2426
  fileName: "Table/Footer.vue",
2427
- dirPath: "components/UI",
2427
+ dirPath: "app/components/Ui",
2428
2428
  fileContent:
2429
2429
  '<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: "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",\n });\n</script>\n',
2430
2430
  },
2431
2431
  {
2432
2432
  fileName: "Table/Head.vue",
2433
- dirPath: "components/UI",
2433
+ dirPath: "app/components/Ui",
2434
2434
  fileContent:
2435
2435
  '<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 [&:has([role=checkbox])]:pr-0",\n });\n</script>\n',
2436
2436
  },
2437
2437
  {
2438
2438
  fileName: "Table/Header.vue",
2439
- dirPath: "components/UI",
2439
+ dirPath: "app/components/Ui",
2440
2440
  fileContent:
2441
2441
  '<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',
2442
2442
  },
2443
2443
  {
2444
2444
  fileName: "Table/Row.vue",
2445
- dirPath: "components/UI",
2445
+ dirPath: "app/components/Ui",
2446
2446
  fileContent:
2447
2447
  '<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',
2448
2448
  },
2449
2449
  {
2450
2450
  fileName: "Table/Table.vue",
2451
- dirPath: "components/UI",
2451
+ dirPath: "app/components/Ui",
2452
2452
  fileContent:
2453
2453
  '<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',
2454
2454
  },
@@ -2463,31 +2463,31 @@ export default [
2463
2463
  files: [
2464
2464
  {
2465
2465
  fileName: "Tabs/Content.vue",
2466
- dirPath: "components/UI",
2466
+ dirPath: "app/components/Ui",
2467
2467
  fileContent:
2468
2468
  '<template>\n <TabsContent v-bind="forwarded" :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 const forwarded = reactiveOmit(props, "class");\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',
2469
2469
  },
2470
2470
  {
2471
2471
  fileName: "Tabs/Indicator.vue",
2472
- dirPath: "components/UI",
2472
+ dirPath: "app/components/Ui",
2473
2473
  fileContent:
2474
2474
  '<template>\n <ClientOnly>\n <TabsIndicator v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot>\n <div class="h-full w-full rounded-md bg-primary" />\n </slot>\n </TabsIndicator>\n </ClientOnly>\n</template>\n\n<script lang="ts" setup>\n import { TabsIndicator } from "radix-vue";\n import type { TabsIndicatorProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<\n TabsIndicatorProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "absolute bottom-0 left-0 h-[3px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full px-1 transition-[width,transform] duration-300",\n });\n</script>\n',
2475
2475
  },
2476
2476
  {
2477
2477
  fileName: "Tabs/List.vue",
2478
- dirPath: "components/UI",
2478
+ dirPath: "app/components/Ui",
2479
2479
  fileContent:
2480
2480
  '<template>\n <TabsList :class="styles({ pill, class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\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',
2481
2481
  },
2482
2482
  {
2483
2483
  fileName: "Tabs/Tabs.vue",
2484
- dirPath: "components/UI",
2484
+ dirPath: "app/components/Ui",
2485
2485
  fileContent:
2486
2486
  '<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',
2487
2487
  },
2488
2488
  {
2489
2489
  fileName: "Tabs/Trigger.vue",
2490
- dirPath: "components/UI",
2490
+ dirPath: "app/components/Ui",
2491
2491
  fileContent:
2492
2492
  '<template>\n <TabsTrigger v-bind="forwarded" :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 const forwarded = reactiveOmit(props, "class");\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',
2493
2493
  },
@@ -2502,37 +2502,37 @@ export default [
2502
2502
  files: [
2503
2503
  {
2504
2504
  fileName: "TagsInput/Clear.vue",
2505
- dirPath: "components/UI",
2505
+ dirPath: "app/components/Ui",
2506
2506
  fileContent:
2507
2507
  '<template>\n <TagsInputClear v-bind="props" :class="styles({ class: props.class })">\n <slot>\n <Icon v-if="icon" :name="icon" class="h-3.5 w-3.5" />\n </slot>\n </TagsInputClear>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputClear } from "radix-vue";\n import type { TagsInputClearProps } from "radix-vue";\n\n const props = withDefaults(defineProps<TagsInputClearProps & { icon?: string; class?: any }>(), {\n icon: "lucide:x",\n });\n const styles = tv({\n base: "flex items-center justify-center rounded bg-transparent p-1 opacity-40 transition hover:bg-muted-foreground hover:opacity-100 focus:opacity-100 focus-visible:outline-none",\n });\n</script>\n',
2508
2508
  },
2509
2509
  {
2510
2510
  fileName: "TagsInput/Field.vue",
2511
- dirPath: "components/UI",
2511
+ dirPath: "app/components/Ui",
2512
2512
  fileContent:
2513
2513
  '<template>\n <TagsInputInput v-bind="forwarded" :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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex-1 bg-transparent focus:outline-none sm:text-sm",\n });\n</script>\n',
2514
2514
  },
2515
2515
  {
2516
2516
  fileName: "TagsInput/Item.vue",
2517
- dirPath: "components/UI",
2517
+ dirPath: "app/components/Ui",
2518
2518
  fileContent:
2519
2519
  '<template>\n <TagsInputItem v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <slot name="text">\n <UiTagsInputItemText />\n </slot>\n <slot name="delete">\n <UiTagsInputItemDelete :icon="icon" />\n </slot>\n </slot>\n </TagsInputItem>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputItem } from "radix-vue";\n import type { TagsInputItemProps } from "radix-vue";\n\n const props = defineProps<TagsInputItemProps & { class?: any; icon?: string }>();\n const forwarded = reactiveOmit(props, "class", "icon");\n const styles = tv({\n base: "inline-flex h-6 shrink-0 items-center gap-1.5 rounded bg-primary pl-2 pr-1 leading-none text-primary-foreground sm:text-sm",\n });\n</script>\n',
2520
2520
  },
2521
2521
  {
2522
2522
  fileName: "TagsInput/ItemDelete.vue",
2523
- dirPath: "components/UI",
2523
+ dirPath: "app/components/Ui",
2524
2524
  fileContent:
2525
2525
  '<template>\n <TagsInputItemDelete v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <Icon v-if="icon" :name="icon" class="h-3.5 w-3.5" />\n </slot>\n </TagsInputItemDelete>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputItemDelete } from "radix-vue";\n import type { TagsInputItemDeleteProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<TagsInputItemDeleteProps & { icon?: string; class?: any }>(),\n {\n icon: "lucide:x",\n }\n );\n const forwarded = reactiveOmit(props, "class", "icon");\n const styles = tv({\n base: "flex items-center justify-center rounded bg-transparent opacity-40 transition hover:bg-muted-foreground hover:opacity-100 focus:opacity-100 focus-visible:outline-none",\n });\n</script>\n',
2526
2526
  },
2527
2527
  {
2528
2528
  fileName: "TagsInput/ItemText.vue",
2529
- dirPath: "components/UI",
2529
+ dirPath: "app/components/Ui",
2530
2530
  fileContent:
2531
2531
  '<template>\n <TagsInputItemText v-bind="forwarded" :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 const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "leading-none sm:text-sm",\n });\n</script>\n',
2532
2532
  },
2533
2533
  {
2534
2534
  fileName: "TagsInput/TagsInput.vue",
2535
- dirPath: "components/UI",
2535
+ dirPath: "app/components/Ui",
2536
2536
  fileContent:
2537
2537
  '<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',
2538
2538
  },
@@ -2549,7 +2549,7 @@ export default [
2549
2549
  files: [
2550
2550
  {
2551
2551
  fileName: "TanStackTable.vue",
2552
- dirPath: "components/UI",
2552
+ dirPath: "app/components/Ui",
2553
2553
  fileContent:
2554
2554
  '<template>\n <div>\n <div :class="styles({ class: props.class })">\n <UiTable :class="tableClass">\n <UiTableHeader>\n <UiTableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">\n <UiTableHead\n v-for="header in headerGroup.headers"\n :key="header.id"\n :colspan="header.colSpan"\n :class="[header.column.getCanSort() && \'cursor-pointer select-none\']"\n @click="header.column.getToggleSortingHandler()?.($event)"\n >\n <template v-if="!header.isPlaceholder">\n <div class="flex items-center gap-3">\n <FlexRender\n :render="header.column.columnDef.header"\n :props="header.getContext()"\n />\n <Icon\n v-if="header.column.getCanSort() && header.column.getIsSorted() === \'asc\'"\n :name="ascIcon"\n class="h-4 w-4"\n />\n <Icon\n v-else-if="header.column.getCanSort() && header.column.getIsSorted() === \'desc\'"\n :name="descIcon"\n class="h-4 w-4"\n />\n <Icon\n v-else-if="header.column.getCanSort() && !header.column.getIsSorted()"\n :name="unsortedIcon"\n class="h-5 w-5"\n />\n </div>\n </template>\n </UiTableHead>\n </UiTableRow>\n </UiTableHeader>\n\n <UiTableBody>\n <UiTableRow\n v-for="row in table.getRowModel().rows"\n :key="row.id"\n :data-state="row.getIsSelected() ? \'selected\' : \'\'"\n >\n <UiTableCell v-for="cell in row.getVisibleCells()" :key="cell.id">\n <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />\n </UiTableCell>\n </UiTableRow>\n\n <UiTableEmpty\n v-if="table.getRowModel().rows.length === 0"\n :colspan="table.getAllLeafColumns().length"\n >\n <slot :table="table" name="empty"> No data available. </slot>\n </UiTableEmpty>\n </UiTableBody>\n </UiTable>\n </div>\n\n <div\n v-if="showPagination"\n class="my-6 flex flex-col justify-between gap-4 px-2 md:flex-row md:items-center"\n >\n <div class="flex items-center justify-between gap-3">\n <slot name="rowsSelected" :table="table">\n <div v-if="showSelect" class="whitespace-nowrap text-sm text-muted-foreground">\n <span>\n {{ table.getFilteredSelectedRowModel().rows.length }} of {{ " " }}\n {{ table.getFilteredRowModel().rows.length }} row(s) selected\n </span>\n </div>\n </slot>\n <slot name="rowsPerPage" :table="table">\n <div class="flex items-center space-x-2 whitespace-nowrap">\n <p class="hidden text-sm font-medium text-foreground md:inline-block">\n {{ rowsPerPageText }}\n </p>\n <UiSelect v-model="pageSize">\n <UiSelectTrigger class="h-9 w-[70px]">\n {{ table.getState().pagination.pageSize }}\n </UiSelectTrigger>\n <UiSelectContent side="top" align="start">\n <UiSelectGroup>\n <!-- eslint-disable vue/no-template-shadow -->\n <UiSelectItem\n v-for="pageSize in pageSizes"\n :key="pageSize"\n :value="`${pageSize}`"\n >\n {{ pageSize }}\n </UiSelectItem>\n </UiSelectGroup>\n </UiSelectContent>\n </UiSelect>\n </div>\n </slot>\n </div>\n\n <div class="flex items-center justify-between gap-3">\n <slot :table="table" name="page">\n <div\n class="flex items-center justify-center whitespace-nowrap text-sm font-medium text-foreground"\n >\n Page {{ table.getState().pagination.pageIndex + 1 }} of\n {{ table.getPageCount() }}\n </div>\n </slot>\n\n <slot :table="table" name="pageButtons">\n <div class="flex items-center space-x-2">\n <UiButton\n variant="outline"\n title="First page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanPreviousPage()"\n @click="table.setPageIndex(0)"\n >\n <Icon name="lucide:chevrons-left" class="h-4 w-4" />\n </UiButton>\n <UiButton\n variant="outline"\n title="Previous page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanPreviousPage()"\n @click="table.previousPage()"\n >\n <Icon name="lucide:chevron-left" class="h-4 w-4" />\n </UiButton>\n <UiButton\n variant="outline"\n title="Next page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanNextPage()"\n @click="table.nextPage()"\n >\n <Icon name="lucide:chevron-right" class="h-4 w-4" />\n </UiButton>\n <UiButton\n variant="outline"\n title="Last page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanNextPage()"\n @click="table.setPageIndex(table.getPageCount() - 1)"\n >\n <Icon name="lucide:chevrons-right" class="h-4 w-4" />\n </UiButton>\n </div>\n </slot>\n </div>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup generic="T">\n import CheckBox from "@/components/Ui/Checkbox/Checkbox.vue";\n import {\n FlexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useVueTable,\n } from "@tanstack/vue-table";\n import type { ColumnDef, SortingState, Table } from "@tanstack/vue-table";\n\n const props = withDefaults(\n defineProps<{\n data?: T[];\n columns?: ColumnDef<T>[];\n search?: string;\n showSelect?: boolean;\n pageSizes?: number[];\n pageSize?: number;\n sorting?: SortingState;\n tableClass?: any;\n ascIcon?: string;\n descIcon?: string;\n unsortedIcon?: string;\n class?: any;\n showPagination?: boolean;\n rowsPerPageText?: string;\n }>(),\n {\n pageSizes: () => [10, 20, 30, 40, 50, 100],\n pageSize: () => 10,\n columns: () => [],\n data: () => [],\n sorting: () => [],\n ascIcon: "heroicons:chevron-up",\n descIcon: "heroicons:chevron-down",\n unsortedIcon: "heroicons:chevron-up-down",\n showPagination: true,\n rowsPerPageText: "Rows per page:",\n }\n );\n\n defineOptions({ inheritAttrs: false });\n\n const styles = tv({\n base: "w-full overflow-x-auto",\n });\n\n const checkBoxHeader: ColumnDef<any> = {\n id: "checkbox",\n header: ({ table }) => {\n return h(\n "div",\n { class: "flex items-center justify-center" },\n h(CheckBox, {\n checked: table.getIsAllRowsSelected()\n ? true\n : table.getIsSomeRowsSelected()\n ? "indeterminate"\n : false,\n "onUpdate:checked": (value: boolean) => table.toggleAllPageRowsSelected(!!value),\n ariaLabel: "Select all",\n })\n );\n },\n cell: ({ row }) => {\n return h(\n "div",\n { class: "flex items-center justify-center " },\n h(CheckBox, {\n checked: row.getIsSelected(),\n "onUpdate:checked": (value) => row.toggleSelected(!!value),\n ariaLabel: "Select row",\n })\n );\n },\n enableSorting: false,\n enableHiding: false,\n };\n\n const localColumns: ColumnDef<T>[] = [...props.columns];\n\n if (props.showSelect) {\n localColumns.unshift(checkBoxHeader);\n }\n\n const emit = defineEmits<{\n ready: [table: Table<T>];\n }>();\n\n const localSorting = ref(props.sorting);\n const globalFilter = ref(props.search);\n const columnVisibility = ref({});\n const rowSelection = ref({});\n\n const table = useVueTable({\n get data() {\n return props.data;\n },\n get columns() {\n return localColumns;\n },\n initialState: {\n pagination: {\n pageSize: props.pageSize,\n },\n rowSelection: rowSelection.value,\n globalFilter: props.search,\n },\n state: {\n get sorting() {\n return localSorting.value;\n },\n get globalFilter() {\n return props.search;\n },\n get columnVisibility() {\n return columnVisibility.value;\n },\n get rowSelection() {\n return rowSelection.value;\n },\n },\n onSortingChange: (updaterOrValue) => {\n localSorting.value =\n typeof updaterOrValue === "function" ? updaterOrValue(localSorting.value) : updaterOrValue;\n },\n onGlobalFilterChange: (updaterOrValue) => {\n globalFilter.value =\n typeof updaterOrValue === "function" ? updaterOrValue(globalFilter.value) : updaterOrValue;\n },\n onRowSelectionChange: (updaterOrValue) => {\n rowSelection.value =\n typeof updaterOrValue === "function" ? updaterOrValue(rowSelection.value) : updaterOrValue;\n },\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n enableRowSelection: () => !!props.showSelect,\n });\n\n function toggleColumnVisibility(column: any) {\n columnVisibility.value = {\n ...columnVisibility.value,\n [column.id]: !column.getIsVisible(),\n };\n }\n\n // eslint-disable-next-line vue/no-dupe-keys\n const pageSize = computed({\n get() {\n return table.getState().pagination.pageSize.toString();\n },\n set(value) {\n table.setPageSize(Number(value));\n },\n });\n\n onMounted(() => {\n emit("ready", table);\n });\n\n defineExpose({ toggleColumnVisibility });\n</script>\n',
2555
2555
  },
@@ -2565,7 +2565,7 @@ export default [
2565
2565
  files: [
2566
2566
  {
2567
2567
  fileName: "Textarea.vue",
2568
- dirPath: "components/UI",
2568
+ dirPath: "app/components/Ui",
2569
2569
  fileContent:
2570
2570
  '<template>\n <textarea v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n name?: string;\n id?: string;\n placeholder?: string;\n required?: boolean;\n disabled?: boolean;\n rows?: number;\n modelValue?: string;\n }>();\n\n const emits = defineEmits<{\n "update:modelValue": [value: any];\n }>();\n\n const localModel = useVModel(props, "modelValue", emits);\n\n const styles = tv({\n base: "form-textarea flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus:border-input focus: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</script>\n',
2571
2571
  },
@@ -2589,49 +2589,49 @@ export default [
2589
2589
  files: [
2590
2590
  {
2591
2591
  fileName: "Toast/Action.vue",
2592
- dirPath: "components/UI",
2592
+ dirPath: "app/components/Ui",
2593
2593
  fileContent:
2594
2594
  '<template>\n <ToastAction :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\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',
2595
2595
  },
2596
2596
  {
2597
2597
  fileName: "Toast/Close.vue",
2598
- dirPath: "components/UI",
2598
+ dirPath: "app/components/Ui",
2599
2599
  fileContent:
2600
2600
  '<template>\n <ToastClose :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>\n <Icon :name="icon || \'lucide:x\'" class="h-4 w-4" />\n </slot>\n </ToastClose>\n</template>\n\n<script lang="ts" setup>\n import { ToastClose } from "radix-vue";\n import type { ToastCloseProps } from "radix-vue";\n\n const props = defineProps<\n ToastCloseProps & {\n /**\n * Custom class names to add to the button.\n */\n class?: any;\n /**\n * The icon to render.\n */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "icon");\n const styles = tv({\n base: "absolute right-2 top-2 inline-flex items-center justify-center rounded-md p-1 text-foreground/50 opacity-50 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 focus-visible:ring-ring group-hover:opacity-100",\n });\n</script>\n',
2601
2601
  },
2602
2602
  {
2603
2603
  fileName: "Toast/Description.vue",
2604
- dirPath: "components/UI",
2604
+ dirPath: "app/components/Ui",
2605
2605
  fileContent:
2606
2606
  '<template>\n <ToastDescription :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>{{ description }}</slot>\n </ToastDescription>\n</template>\n\n<script lang="ts" setup>\n import { ToastDescription } from "radix-vue";\n import type { ToastDescriptionProps } from "radix-vue";\n\n const props = defineProps<\n ToastDescriptionProps & {\n /** The description text to render */\n description?: string;\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "description");\n const styles = tv({\n base: "text-sm opacity-90",\n });\n</script>\n',
2607
2607
  },
2608
2608
  {
2609
2609
  fileName: "Toast/Provider.vue",
2610
- dirPath: "components/UI",
2610
+ dirPath: "app/components/Ui",
2611
2611
  fileContent:
2612
2612
  '<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',
2613
2613
  },
2614
2614
  {
2615
2615
  fileName: "Toast/Title.vue",
2616
- dirPath: "components/UI",
2616
+ dirPath: "app/components/Ui",
2617
2617
  fileContent:
2618
2618
  '<template>\n <ToastTitle :class="styles({ class: props.class })" v-bind="forwarded">\n <slot>{{ title }}</slot>\n </ToastTitle>\n</template>\n\n<script lang="ts" setup>\n import { ToastTitle } from "radix-vue";\n import type { ToastTitleProps } from "radix-vue";\n\n const props = defineProps<\n ToastTitleProps & {\n /** The title text to render */\n title?: string;\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class", "title");\n const styles = tv({\n base: "text-sm font-semibold",\n });\n</script>\n',
2619
2619
  },
2620
2620
  {
2621
2621
  fileName: "Toast/Toast.vue",
2622
- dirPath: "components/UI",
2622
+ dirPath: "app/components/Ui",
2623
2623
  fileContent:
2624
2624
  '<template>\n <ToastRoot\n v-slot="slotProps"\n v-bind="forwarded"\n :class="styles({ variant, class: props.class })"\n @update:open="onOpenChange"\n >\n <slot v-bind="slotProps" />\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 provide("ToastRootProps", readonly(toRef(() => props)));\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',
2625
2625
  },
2626
2626
  {
2627
2627
  fileName: "Toast/Toaster.vue",
2628
- dirPath: "components/UI",
2628
+ dirPath: "app/components/Ui",
2629
2629
  fileContent:
2630
2630
  '<template>\n <UiToastProvider>\n <template v-for="toast in toasts" :key="toast.id">\n <UiToast v-bind="toast">\n <div class="flex gap-3">\n <Icon\n v-if="toast.icon"\n :name="toast.icon"\n class="h-5 w-5 shrink-0"\n :class="[!!toast.title && !!toast.description && \'mt-0.5\']"\n />\n <div class="flex flex-col gap-1">\n <UiToastTitle v-if="toast.title" :title="toast.title" />\n <template v-if="toast.description">\n <UiToastDescription v-if="isVNode(toast.description)">\n <component :is="toast.description" />\n </UiToastDescription>\n <UiToastDescription v-else>\n {{ toast.description }}\n </UiToastDescription>\n </template>\n <UiToastClose />\n </div>\n </div>\n <component :is="toast.action" />\n </UiToast>\n </template>\n <UiToastViewport />\n </UiToastProvider>\n</template>\n\n<script lang="ts" setup>\n import { isVNode } from "vue";\n\n const { toasts } = useToast();\n</script>\n\n<style>\n :root {\n --success-bg: hsl(143, 85%, 96%);\n --success-border: hsl(145, 92%, 91%);\n --success-text: hsl(140, 100%, 27%);\n\n --info-bg: hsl(208, 100%, 97%);\n --info-border: hsl(221, 91%, 91%);\n --info-text: hsl(210, 92%, 45%);\n\n --warning-bg: hsl(49, 100%, 97%);\n --warning-border: hsl(49, 91%, 91%);\n --warning-text: hsl(31, 92%, 45%);\n\n --error-bg: hsl(359, 100%, 97%);\n --error-border: hsl(359, 100%, 94%);\n --error-text: hsl(360, 100%, 45%);\n }\n .dark {\n --success-bg: hsl(150, 100%, 6%);\n --success-border: hsl(147, 100%, 12%);\n --success-text: hsl(150, 86%, 65%);\n\n --info-bg: hsl(215, 100%, 6%);\n --info-border: hsl(223, 100%, 12%);\n --info-text: hsl(216, 87%, 65%);\n\n --warning-bg: hsl(64, 100%, 6%);\n --warning-border: hsl(60, 100%, 12%);\n --warning-text: hsl(46, 87%, 65%);\n\n --error-bg: hsl(358, 76%, 10%);\n --error-border: hsl(357, 89%, 16%);\n --error-text: hsl(358, 100%, 81%);\n }\n</style>\n',
2631
2631
  },
2632
2632
  {
2633
2633
  fileName: "Toast/Viewport.vue",
2634
- dirPath: "components/UI",
2634
+ dirPath: "app/components/Ui",
2635
2635
  fileContent:
2636
2636
  '<template>\n <ToastViewport :class="styles({ class: props.class })" v-bind="forwarded">\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 const forwarded = reactiveOmit(props, "class");\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',
2637
2637
  },
@@ -2645,7 +2645,7 @@ export default [
2645
2645
  files: [
2646
2646
  {
2647
2647
  fileName: "Toggle.vue",
2648
- dirPath: "components/UI",
2648
+ dirPath: "app/components/Ui",
2649
2649
  fileContent:
2650
2650
  '<template>\n <ToggleRoot\n v-slot="slotProps"\n v-bind="forwarded"\n :class="styles({ variant, size, class: props.class })"\n >\n <slot v-bind="slotProps" />\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',
2651
2651
  },
@@ -2660,13 +2660,13 @@ export default [
2660
2660
  files: [
2661
2661
  {
2662
2662
  fileName: "ToggleGroup/ToggleGroup.vue",
2663
- dirPath: "components/UI",
2663
+ dirPath: "app/components/Ui",
2664
2664
  fileContent:
2665
2665
  '<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 = withDefaults(\n defineProps<\n ToggleGroupRootProps & {\n /** custom class to add to the parent */\n class?: any;\n }\n >(),\n {\n type: "single",\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',
2666
2666
  },
2667
2667
  {
2668
2668
  fileName: "ToggleGroup/ToggleGroupItem.vue",
2669
- dirPath: "components/UI",
2669
+ dirPath: "app/components/Ui",
2670
2670
  fileContent:
2671
2671
  '<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',
2672
2672
  },
@@ -2681,37 +2681,37 @@ export default [
2681
2681
  files: [
2682
2682
  {
2683
2683
  fileName: "Tooltip/Arrow.vue",
2684
- dirPath: "components/UI",
2684
+ dirPath: "app/components/Ui",
2685
2685
  fileContent:
2686
2686
  '<template>\n <TooltipArrow v-bind="props" />\n</template>\n\n<script lang="ts" setup>\n import { TooltipArrow } from "radix-vue";\n import type { TooltipArrowProps } from "radix-vue";\n\n const props = withDefaults(defineProps<TooltipArrowProps>(), {\n width: 10,\n height: 5,\n });\n</script>\n',
2687
2687
  },
2688
2688
  {
2689
2689
  fileName: "Tooltip/Content.vue",
2690
- dirPath: "components/UI",
2690
+ dirPath: "app/components/Ui",
2691
2691
  fileContent:
2692
2692
  '<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',
2693
2693
  },
2694
2694
  {
2695
2695
  fileName: "Tooltip/Portal.vue",
2696
- dirPath: "components/UI",
2696
+ dirPath: "app/components/Ui",
2697
2697
  fileContent:
2698
2698
  '<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',
2699
2699
  },
2700
2700
  {
2701
2701
  fileName: "Tooltip/Provider.vue",
2702
- dirPath: "components/UI",
2702
+ dirPath: "app/components/Ui",
2703
2703
  fileContent:
2704
2704
  '<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',
2705
2705
  },
2706
2706
  {
2707
2707
  fileName: "Tooltip/Tooltip.vue",
2708
- dirPath: "components/UI",
2708
+ dirPath: "app/components/Ui",
2709
2709
  fileContent:
2710
2710
  '<template>\n <UiTooltipProvider v-bind="props">\n <TooltipRoot v-slot="slotProps" v-bind="{ ...forwarded, ...$attrs }">\n <slot v-bind="slotProps">\n <slot v-bind="slotProps" name="trigger" />\n <slot v-bind="slotProps" 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',
2711
2711
  },
2712
2712
  {
2713
2713
  fileName: "Tooltip/Trigger.vue",
2714
- dirPath: "components/UI",
2714
+ dirPath: "app/components/Ui",
2715
2715
  fileContent:
2716
2716
  '<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',
2717
2717
  },
@@ -2726,19 +2726,19 @@ export default [
2726
2726
  files: [
2727
2727
  {
2728
2728
  fileName: "Tree/Item.vue",
2729
- dirPath: "components/UI",
2729
+ dirPath: "app/components/Ui",
2730
2730
  fileContent:
2731
2731
  '<template>\n <TreeItem v-slot="slotProps" v-bind="forwarded">\n <slot v-bind="slotProps" />\n </TreeItem>\n</template>\n\n<script lang="ts" setup generic="T extends Record<string, any>">\n import { TreeItem, useForwardPropsEmits } from "radix-vue";\n import type { TreeItemEmits, TreeItemProps } from "radix-vue";\n\n const props = defineProps<TreeItemProps<T>>();\n const emit = defineEmits<TreeItemEmits<T>>();\n\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
2732
2732
  },
2733
2733
  {
2734
2734
  fileName: "Tree/Tree.vue",
2735
- dirPath: "components/UI",
2735
+ dirPath: "app/components/Ui",
2736
2736
  fileContent:
2737
2737
  '<template>\n <TreeRoot v-slot="slotProps" v-bind="forwarded">\n <slot v-bind="slotProps" />\n </TreeRoot>\n</template>\n\n<script lang="ts" setup>\n import { TreeRoot, useForwardPropsEmits } from "radix-vue";\n import type { TreeRootEmits, TreeRootProps } from "radix-vue";\n\n const props = defineProps<TreeRootProps>();\n const emit = defineEmits<TreeRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
2738
2738
  },
2739
2739
  {
2740
2740
  fileName: "Tree/Virtualizer.vue",
2741
- dirPath: "components/UI",
2741
+ dirPath: "app/components/Ui",
2742
2742
  fileContent:
2743
2743
  '<template>\n <TreeVirtualizer v-slot="slotProps" v-bind="forwarded">\n <slot v-bind="slotProps" />\n </TreeVirtualizer>\n</template>\n\n<script lang="ts" setup>\n import { TreeVirtualizer, useForwardPropsEmits } from "radix-vue";\n import type { TreeVirtualizerProps } from "radix-vue";\n\n const props = defineProps<TreeVirtualizerProps>();\n const forwarded = useForwardPropsEmits(props);\n</script>\n',
2744
2744
  },
@@ -2757,7 +2757,7 @@ export default [
2757
2757
  files: [
2758
2758
  {
2759
2759
  fileName: "Vee/Checkbox.vue",
2760
- dirPath: "components/UI",
2760
+ dirPath: "app/components/Ui",
2761
2761
  fileContent:
2762
2762
  '<template>\n <div :class="styles({ class: props.class })">\n <UiCheckbox\n :id="inputId"\n v-bind="$attrs"\n :icon="icon"\n :value="value"\n :name="name"\n :required="required"\n :disabled="disabled"\n :checked="checked"\n @update:checked="handleChange"\n />\n <div class="flex flex-col gap-1.5">\n <slot name="label" :error-message="errorMessage" :checked="checked">\n <UiLabel\n v-if="label"\n :for="inputId"\n class="leading-none"\n :class="[errorMessage && \'text-destructive\']"\n >{{ label }}</UiLabel\n >\n </slot>\n <TransitionSlide tag="div" group>\n <slot name="hint" :error-message="errorMessage" :checked="checked">\n <p\n v-if="hint && !errorMessage"\n key="hint"\n class="text-sm leading-none text-muted-foreground"\n >\n {{ hint }}\n </p>\n </slot>\n <slot name="errorMessage" :error-message="errorMessage" :checked="checked">\n <p v-if="errorMessage" key="errorMessage" class="text-sm leading-none text-destructive">\n {{ errorMessage }}\n </p>\n </slot>\n </TransitionSlide>\n </div>\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?: any;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n placeholder?: string;\n value?: any;\n required?: boolean;\n disabled?: boolean;\n class?: any;\n }>();\n const styles = tv({\n base: "flex gap-3",\n });\n\n const inputId = props.id || useId();\n\n const { errorMessage, checked, handleChange } = useField(\n () => props.name || inputId,\n props.rules,\n {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n type: "checkbox",\n checkedValue: props.value || true,\n syncVModel: true,\n }\n );\n</script>\n',
2763
2763
  },
@@ -2776,7 +2776,7 @@ export default [
2776
2776
  files: [
2777
2777
  {
2778
2778
  fileName: "Vee/CurrencyInput.vue",
2779
- dirPath: "components/UI",
2779
+ dirPath: "app/components/Ui",
2780
2780
  fileContent:
2781
2781
  '<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',
2782
2782
  },
@@ -2795,7 +2795,7 @@ export default [
2795
2795
  files: [
2796
2796
  {
2797
2797
  fileName: "Vee/DateField.vue",
2798
- dirPath: "components/UI",
2798
+ dirPath: "app/components/Ui",
2799
2799
  fileContent:
2800
2800
  '<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',
2801
2801
  },
@@ -2814,7 +2814,7 @@ export default [
2814
2814
  files: [
2815
2815
  {
2816
2816
  fileName: "Vee/Datepicker.vue",
2817
- dirPath: "components/UI",
2817
+ dirPath: "app/components/Ui",
2818
2818
  fileContent:
2819
2819
  '<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',
2820
2820
  },
@@ -2833,7 +2833,7 @@ export default [
2833
2833
  files: [
2834
2834
  {
2835
2835
  fileName: "Vee/FileInput.vue",
2836
- dirPath: "components/UI",
2836
+ dirPath: "app/components/Ui",
2837
2837
  fileContent:
2838
2838
  '<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',
2839
2839
  },
@@ -2852,7 +2852,7 @@ export default [
2852
2852
  files: [
2853
2853
  {
2854
2854
  fileName: "Vee/Input.vue",
2855
- dirPath: "components/UI",
2855
+ dirPath: "app/components/Ui",
2856
2856
  fileContent:
2857
2857
  '<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 <slot name="trailingIcon">\n <span\n v-if="hasTrailingIcon"\n class="absolute inset-y-0 right-3 flex items-center justify-center"\n >\n <Icon v-if="trailingIcon" :name="trailingIcon" 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\', hasTrailingIcon && \'pr-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 trailingIcon?: 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 defineOptions({ inheritAttrs: false });\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n const hasTrailingIcon = computed(\n () => Boolean(props.trailingIcon) || Boolean(useSlots().trailingIcon)\n );\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',
2858
2858
  },
@@ -2871,7 +2871,7 @@ export default [
2871
2871
  files: [
2872
2872
  {
2873
2873
  fileName: "Vee/MultiSelect.vue",
2874
- dirPath: "components/UI",
2874
+ dirPath: "app/components/Ui",
2875
2875
  fileContent:
2876
2876
  '<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',
2877
2877
  },
@@ -2890,7 +2890,7 @@ export default [
2890
2890
  files: [
2891
2891
  {
2892
2892
  fileName: "Vee/NumberField.vue",
2893
- dirPath: "components/UI",
2893
+ dirPath: "app/components/Ui",
2894
2894
  fileContent:
2895
2895
  '<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 <UiNumberField\n v-bind="($attrs, props)"\n :id="inputId"\n v-model="value"\n :disabled="disabled"\n :required="required"\n :name="name"\n >\n <template v-for="(_, slotName) in $slots" #[slotName]="scope">\n <slot :name="slotName" v-bind="scope" />\n </template>\n </UiNumberField>\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 { NumberFieldRootProps } from "radix-vue";\n\n interface Props extends NumberFieldRootProps {\n label?: string;\n labelHint?: string;\n hint?: string;\n disabled?: boolean;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n required?: boolean;\n }\n const props = defineProps<Props>();\n\n const inputId = computed(() => props.id || useId());\n\n const { errorMessage, value } = useField(() => props.name || inputId.value, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
2896
2896
  },
@@ -2909,7 +2909,7 @@ export default [
2909
2909
  files: [
2910
2910
  {
2911
2911
  fileName: "Vee/PinInput.vue",
2912
- dirPath: "components/UI",
2912
+ dirPath: "app/components/Ui",
2913
2913
  fileContent:
2914
2914
  '<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="{ ...$attrs, ...forwarded }"\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 <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 "update:modelValue": [value: string[]];\n }>();\n\n const forwarded = reactiveOmit(\n props,\n "label",\n "hint",\n "id",\n "rules",\n "validateOnMount",\n "modelValue"\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',
2915
2915
  },
@@ -2928,7 +2928,7 @@ export default [
2928
2928
  files: [
2929
2929
  {
2930
2930
  fileName: "Vee/RadioGroup.vue",
2931
- dirPath: "components/UI",
2931
+ dirPath: "app/components/Ui",
2932
2932
  fileContent:
2933
2933
  '<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',
2934
2934
  },
@@ -2947,7 +2947,7 @@ export default [
2947
2947
  files: [
2948
2948
  {
2949
2949
  fileName: "Vee/Select.vue",
2950
- dirPath: "components/UI",
2950
+ dirPath: "app/components/Ui",
2951
2951
  fileContent:
2952
2952
  '<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',
2953
2953
  },
@@ -2966,7 +2966,7 @@ export default [
2966
2966
  files: [
2967
2967
  {
2968
2968
  fileName: "Vee/TagsInput.vue",
2969
- dirPath: "components/UI",
2969
+ dirPath: "app/components/Ui",
2970
2970
  fileContent:
2971
2971
  '<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',
2972
2972
  },
@@ -2985,7 +2985,7 @@ export default [
2985
2985
  files: [
2986
2986
  {
2987
2987
  fileName: "Vee/Textarea.vue",
2988
- dirPath: "components/UI",
2988
+ dirPath: "app/components/Ui",
2989
2989
  fileContent:
2990
2990
  '<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',
2991
2991
  },
@@ -3004,7 +3004,7 @@ export default [
3004
3004
  files: [
3005
3005
  {
3006
3006
  fileName: "Vee/VueFormSlider.vue",
3007
- dirPath: "components/UI",
3007
+ dirPath: "app/components/Ui",
3008
3008
  fileContent:
3009
3009
  '<template>\n <Slider v-bind="{ ...forwarded, ...$attrs }" v-model="model" />\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</template>\n\n<script lang="ts">\n import Slider from "@vueform/slider";\n import { useForwardPropsEmits } from "radix-vue";\n\n export type SliderFormatObject = {\n /**\n * Prefix to prepend to the value.\n * @example "$"\n */\n prefix?: string;\n /**\n * Suffix to append to the value.\n * @example "USD"\n */\n suffix?: string;\n /**\n * Number of decimals to show.\n * @example 2\n */\n decimals?: number;\n /**\n * Character to use as thousand separator.\n * @example ","\n */\n thousand?: string;\n };\n\n export interface SliderProps {\n /**\n * The hint to display below the slider.\n */\n hint?: string;\n /**\n * The rules for the slider. Used with vee-validate for validation.\n */\n rules?: any;\n /**\n * Whether the slider should be validated on mount.\n */\n validateOnMount?: boolean;\n /**\n * The label of the slider. Used with vee-validate for error messages\n */\n label?: string;\n /**\n * The name we want to give this slider in the form.\n */\n name?: string;\n /**\n * The id attribute of slider container DOM.\n * @default "slider"\n */\n id?: string;\n /**\n * Whether to update v-model only when the slider value is set and not while dragging.\n *\n * If disabled you must not use inline objects as props (eg. format, options, classes) but outsource them to a data property.\n *\n * @default true\n */\n lazy?: boolean;\n /**\n * Whether the slider should be disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Minimum value of the slider.\n * @default 0\n */\n min?: number;\n /**\n * Maximum value of the slider.\n * @default 100\n */\n max?: number;\n /**\n * The jump between intervals. If `-1` it enables fractions (eg. `1.23`).\n * @default 1\n */\n step?: number;\n /**\n * Whether tooltips should show above handlers.\n * @default true\n */\n tooltips?: boolean;\n /**\n * When tooltips should be shown.\n * @default "always"\n */\n showTooltip?: "always" | "focus" | "drag";\n /**\n * The step distance between two handles when their tooltips should be merged (when step is `-1` then `1` is assumed).\n *\n * @example\n *\n * ```js\n * { merge: 5, step: 10 }\n * // values: 0, <=50 will merge\n * // values: 0, 60 will not merge\n *\n * { merge: 5, step: -1 }\n *\n * // values: 0, <=5 will merge\n * // values: 0, 5.01 will not merge\n *\n * ```\n * @default -1\n */\n merge?: number;\n /**\n * Formats the tooltip.\n *\n * It can be either a function that receives a `value` param and expects a string or number as return or an object with the following properties:\n *\n *\n * prefix - eg $ -> $100\n *\n * suffix - eg USD -> 100USD\n *\n * decimals - eg 2 -> 100.00\n *\n * thousand - eg , - 1,000\n */\n format?: SliderFormatObject | ((value: number) => string | number);\n /**\n * The orientation of the slider.\n * @default "horizontal"\n */\n orientation?: "horizontal" | "vertical";\n /**\n * The direction of the slider.\n *\n * By default value increases left-to-right and top-to-bottom, which is reversed when using `rtl`.\n *\n * @default "ltr"\n */\n direction?: "ltr" | "rtl";\n /**\n * The position of the slider tooltips.\n *\n * Possible values: `null` | `top` | `bottom` | `left` | `right` depending on orientation prop.\n *\n * When null it equals to orientation default (`top` for `horizontal` and `left` for `vertical`).\n * @default null\n */\n tooltipPosition?: null | "top" | "bottom" | "left" | "right";\n /**\n * An object containing aria attributes to be added for each handle.\n */\n aria?: Record<string, any>;\n /**\n * Sets the aria-labelledby attribute of handles.\n */\n ariaLabelledby?: string;\n /**\n * Additional options for noUiSlider.\n * @see https://refreshless.com/nouislider/slider-options/\n */\n options?: Record<string, any>;\n /**\n * Initial value of the slider.\n */\n modelValue?: any;\n value?: any;\n /**\n * An object of class names that gets merged with the default values\n */\n classes?: Record<string, any>;\n }\n\n export type SliderEmits = {\n /**\n * Emitted when dragging the slider is finished or it\'s value changed by clicking, keyboard or programmatically set.\n */\n change: [v: any];\n /**\n * Emitted in the same scenarios as in `@change`, but also when the slider is being dragged if `lazy` option is disabled.\n */\n update: [v: any];\n /**\n * Emitted in the same scenarios as in `@change`, but also when the slider\'s `.set()` method is called.\n */\n set: [v: any];\n /**\n * Emitted while the slider moves.\n */\n slide: [v: any];\n /**\n * Emitted the slider connect moves while dragging.\n */\n drag: [v: any];\n /**\n * Emitted when the handle is activated and dragging started.\n */\n start: [v: any];\n /**\n * Emitted when the dragging ended.\n */\n end: [v: any];\n };\n</script>\n<script lang="ts" setup>\n defineOptions({ inheritAttrs: false });\n const props = defineProps<SliderProps>();\n\n const emits = defineEmits<SliderEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n\n const { errorMessage, value: model } = useField(\n () => props.name || props.id || useId(),\n props.rules,\n {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n }\n );\n</script>\n\n<style src="@vueform/slider/themes/default.css"></style>\n\n<style>\n :root {\n --slider-bg: theme(colors.muted.DEFAULT);\n --slider-connect-bg: theme(colors.primary.DEFAULT);\n --slider-connect-bg-disabled: theme(colors.primary.DEFAULT/45%);\n --slider-height: 8px;\n --slider-vertical-height: 300px;\n --slider-radius: 999999px;\n\n --slider-handle-bg: #ffffff;\n --slider-handle-border: 0;\n --slider-handle-width: 20px;\n --slider-handle-height: 20px;\n --slider-handle-radius: 99999px;\n --slider-handle-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);\n --slider-handle-shadow-active: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.42);\n --slider-handle-ring-width: 3px;\n --slider-handle-ring-color: theme(colors.primary.DEFAULT/20%);\n\n --slider-tooltip-font-size: 0.875rem;\n --slider-tooltip-line-height: 1.25rem;\n --slider-tooltip-font-weight: 600;\n --slider-tooltip-min-width: 24px;\n --slider-tooltip-bg: theme(colors.primary.DEFAULT);\n --slider-tooltip-bg-disabled: theme(colors.primary.DEFAULT/90%);\n --slider-tooltip-color: theme(colors.primary.foreground);\n --slider-tooltip-radius: theme(borderRadius.sm);\n --slider-tooltip-py: 2px;\n --slider-tooltip-px: 6px;\n --slider-tooltip-arrow-size: 5px;\n --slider-tooltip-distance: 4px;\n }\n</style>\n',
3010
3010
  },
@@ -3021,7 +3021,7 @@ export default [
3021
3021
  files: [
3022
3022
  {
3023
3023
  fileName: "VueSonner.client.vue",
3024
- dirPath: "components/UI",
3024
+ dirPath: "app/components/Ui",
3025
3025
  fileContent:
3026
3026
  '<template>\n <Toaster\n position="top-right"\n :visible-toasts="5"\n rich-colors\n :duration="7000"\n close-button\n :theme="$colorMode.value == \'dark\' ? \'dark\' : \'light\'"\n />\n</template>\n\n<script lang="ts" setup>\n import { Toaster } from "vue-sonner";\n</script>\n<style scoped>\n :deep([data-sonner-toaster][data-theme="dark"]),\n :deep([data-sonner-toaster][data-theme="light"]) {\n --normal-bg: theme("colors.popover.DEFAULT");\n --normal-border: theme("colors.border");\n --normal-text: theme("colors.popover.foreground");\n --border-radius: theme("borderRadius.md");\n }\n :deep([data-sonner-toaster]) {\n @apply font-sans;\n }\n :deep([data-sonner-toast][data-styled="true"]) {\n @apply items-start;\n }\n :deep([data-sonner-toast] [data-icon]) {\n @apply mt-0.5;\n }\n :deep([data-sonner-toast] [data-title]) {\n @apply text-sm font-semibold;\n }\n :deep([data-sonner-toast] [data-description]) {\n @apply text-sm;\n }\n :deep([data-sonner-toast] [data-close-button]) {\n @apply border border-border bg-background text-foreground hover:!border-inherit hover:!bg-inherit hover:!text-accent-foreground;\n }\n :deep([data-sonner-toast] [data-button]) {\n @apply bg-primary text-primary-foreground transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\n }\n :deep(.sonner-loading-bar) {\n @apply bg-muted-foreground;\n }\n</style>\n',
3027
3027
  },