create-nala 3.0.0

package/template/src/components/ui/input/InputIcon.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes["class"]
+    side?: "left" | "right"
+  }>(),
+  {
+    side: "left",
+  },
+)
+</script>
+
+<template>
+  <div
+    data-slot="input-icon"
+    :class="
+      cn(
+        'absolute top-1/2 -translate-y-1/2 flex items-center justify-center text-muted-foreground pointer-events-none [&>svg]:size-4',
+        props.side === 'left' ? 'left-3' : 'right-3',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/template/src/components/ui/input/index.ts

@@ -0,0 +1,4 @@
+export { default as Input } from "./Input.vue"
+export { default as InputGroup } from "./InputGroup.vue"
+export { default as InputIcon } from "./InputIcon.vue"
+export { default as InputAddon } from "./InputAddon.vue"

package/template/src/components/ui/kbd/Kbd.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+interface Props {
+  class?: HTMLAttributes["class"]
+  size?: "sm" | "default" | "lg"
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "default",
+})
+</script>
+
+<template>
+  <kbd
+    data-slot="kbd"
+    :class="
+      cn(
+        'inline-flex items-center justify-center font-mono font-medium select-none rounded border border-border bg-muted/60 text-muted-foreground shadow-2xs transition-colors',
+        size === 'sm' && 'h-4.5 min-w-4.5 px-1 text-[10px]',
+        size === 'default' && 'h-5 min-w-5 px-1.5 text-[11px]',
+        size === 'lg' && 'h-6 min-w-6 px-2 text-xs',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </kbd>
+</template>

package/template/src/components/ui/kbd/index.ts

@@ -0,0 +1 @@
+export { default as Kbd } from './Kbd.vue'

package/template/src/components/ui/label/Label.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Label } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

package/template/src/components/ui/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from "./Label.vue"

package/template/src/components/ui/loading-bar/LoadingBar.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { loadingBar } from '@/lib/loading-bar'
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-opacity duration-200"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition-opacity duration-300"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="loadingBar.visible.value"
+      class="fixed top-0 left-0 right-0 z-9999 h-[2.5px] pointer-events-none overflow-hidden"
+    >
+      <div
+        class="relative h-full transition-all duration-200 ease-out shadow-sm"
+        :class="[
+          loadingBar.status.value === 'error'
+            ? 'bg-destructive shadow-destructive/50'
+            : 'bg-primary shadow-primary/50',
+        ]"
+        :style="{
+          width: `${loadingBar.progress.value}%`,
+        }"
+      >
+        <!-- Subtle glowing leading edge -->
+        <div
+          class="absolute top-0 right-0 h-full w-24 opacity-75 blur-[1px]"
+          :class="[
+            loadingBar.status.value === 'error'
+              ? 'bg-destructive/80'
+              : 'bg-primary/80',
+          ]"
+        />
+      </div>
+    </div>
+  </Transition>
+</template>

package/template/src/components/ui/loading-bar/index.ts

@@ -0,0 +1,2 @@
+export { default as LoadingBar } from './LoadingBar.vue'
+export { loadingBar } from '@/lib/loading-bar'

package/template/src/components/ui/pagination/Pagination.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PaginationRootEmits, PaginationRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationRootProps & {
+  class?: HTMLAttributes["class"]
+}>()
+const emits = defineEmits<PaginationRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PaginationRoot
+    v-slot="slotProps"
+    data-slot="pagination"
+    v-bind="forwarded"
+    :class="cn('mx-auto flex w-full justify-center', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationRoot>
+</template>

package/template/src/components/ui/pagination/PaginationContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { PaginationListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <PaginationList
+    v-slot="slotProps"
+    data-slot="pagination-content"
+    v-bind="delegatedProps"
+    :class="cn('flex flex-row items-center gap-1', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationList>
+</template>

package/template/src/components/ui/pagination/PaginationEllipsis.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PaginationEllipsisProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { MoreHorizontal } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationEllipsis } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <PaginationEllipsis
+    data-slot="pagination-ellipsis"
+    v-bind="delegatedProps"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+      <span class="sr-only">More pages</span>
+    </slot>
+  </PaginationEllipsis>
+</template>

package/template/src/components/ui/pagination/PaginationFirst.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationFirstProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { ChevronLeftIcon } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationFirst, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationFirstProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationFirst
+    data-slot="pagination-first"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ChevronLeftIcon />
+      <span class="hidden sm:block">First</span>
+    </slot>
+  </PaginationFirst>
+</template>

package/template/src/components/ui/pagination/PaginationItem.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { PaginationListItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationListItem } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationListItemProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+  isActive?: boolean
+}>(), {
+  size: "icon",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size", "isActive")
+</script>
+
+<template>
+  <PaginationListItem
+    data-slot="pagination-item"
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      props.class)"
+  >
+    <slot />
+  </PaginationListItem>
+</template>

package/template/src/components/ui/pagination/PaginationLast.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationLastProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { ChevronRightIcon } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationLast, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationLastProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationLast
+    data-slot="pagination-last"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="hidden sm:block">Last</span>
+      <ChevronRightIcon />
+    </slot>
+  </PaginationLast>
+</template>

package/template/src/components/ui/pagination/PaginationNext.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { ChevronRightIcon } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationNextProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationNext
+    data-slot="pagination-next"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </slot>
+  </PaginationNext>
+</template>

package/template/src/components/ui/pagination/PaginationPrevious.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { ChevronLeftIcon } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationPrevProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationPrev
+    data-slot="pagination-previous"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ChevronLeftIcon />
+      <span class="hidden sm:block">Previous</span>
+    </slot>
+  </PaginationPrev>
+</template>

package/template/src/components/ui/pagination/index.ts

@@ -0,0 +1,8 @@
+export { default as Pagination } from "./Pagination.vue"
+export { default as PaginationContent } from "./PaginationContent.vue"
+export { default as PaginationEllipsis } from "./PaginationEllipsis.vue"
+export { default as PaginationFirst } from "./PaginationFirst.vue"
+export { default as PaginationItem } from "./PaginationItem.vue"
+export { default as PaginationLast } from "./PaginationLast.vue"
+export { default as PaginationNext } from "./PaginationNext.vue"
+export { default as PaginationPrevious } from "./PaginationPrevious.vue"

package/template/src/components/ui/pin-input/PinInput.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PinInputRootEmits, PinInputRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PinInputRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<PinInputRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    placeholder: "○",
+  }
+)
+const emits = defineEmits<PinInputRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PinInputRoot
+    data-slot="pin-input"
+    v-bind="forwarded"
+    :class="cn('flex items-center gap-2', props.class)"
+  >
+    <slot />
+  </PinInputRoot>
+</template>

package/template/src/components/ui/pin-input/PinInputGroup.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="pin-input-group"
+    v-bind="props"
+    :class="cn('flex items-center gap-2', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/template/src/components/ui/pin-input/PinInputInput.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PinInputInputProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PinInputInput, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes["class"] }>()
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PinInputInput
+    data-slot="pin-input-input"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-background text-center text-sm font-mono font-medium shadow-xs transition-all outline-hidden focus:z-10 focus:border-ring focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive',
+        props.class
+      )
+    "
+  />
+</template>

package/template/src/components/ui/pin-input/PinInputSeparator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Dot } from "@lucide/vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="pin-input-separator"
+    v-bind="props"
+    :class="cn('text-muted-foreground flex items-center justify-center', props.class)"
+  >
+    <slot>
+      <Dot class="size-4" />
+    </slot>
+  </Primitive>
+</template>

package/template/src/components/ui/pin-input/index.ts

@@ -0,0 +1,4 @@
+export { default as PinInput } from "./PinInput.vue"
+export { default as PinInputGroup } from "./PinInputGroup.vue"
+export { default as PinInputInput } from "./PinInputInput.vue"
+export { default as PinInputSeparator } from "./PinInputSeparator.vue"

package/template/src/components/ui/popover/Popover.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot
+    v-slot="slotProps"
+    data-slot="popover"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </PopoverRoot>
+</template>

package/template/src/components/ui/popover/PopoverAnchor.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from "reka-ui"
+import { PopoverAnchor } from "reka-ui"
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+  <PopoverAnchor
+    data-slot="popover-anchor"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverAnchor>
+</template>

package/template/src/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-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 z-50 w-72 max-w-(--reka-popover-content-available-width) rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/template/src/components/ui/popover/PopoverTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger
+    data-slot="popover-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>

package/template/src/components/ui/popover/index.ts

@@ -0,0 +1,4 @@
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverAnchor } from "./PopoverAnchor.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
+export { default as PopoverTrigger } from "./PopoverTrigger.vue"

package/template/src/components/ui/progress/Progress.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ProgressIndicator, ProgressRoot } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-muted relative h-2 w-full overflow-hidden rounded-full',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary h-full w-full flex-1 transition-all duration-300 ease-in-out"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>

package/template/src/components/ui/progress/index.ts

@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.vue"