create-nala 3.0.0

package/template/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { MoreHorizontal } from "@lucide/vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>

package/template/src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-item"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>

package/template/src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="breadcrumb-link"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/template/src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ol
+    data-slot="breadcrumb-list"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>

package/template/src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-page"
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('text-foreground font-normal', props.class)"
+  >
+    <slot />
+  </span>
+</template>

package/template/src/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { ChevronRight } from "@lucide/vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-separator"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>

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

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "./Breadcrumb.vue"
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
+export { default as BreadcrumbList } from "./BreadcrumbList.vue"
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"

package/template/src/components/ui/button/Button.spec.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Button from './Button.vue'
+
+describe('Button component', () => {
+  it('renders default slot content correctly', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'Click Me',
+      },
+    })
+    expect(wrapper.text()).toBe('Click Me')
+    expect(wrapper.element.tagName).toBe('BUTTON')
+  })
+
+  it('applies default variant and size attributes', () => {
+    const wrapper = mount(Button)
+    expect(wrapper.attributes('data-slot')).toBe('button')
+  })
+
+  it('applies custom variant classes properly', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'destructive',
+      },
+    })
+    expect(wrapper.attributes('data-variant')).toBe('destructive')
+    expect(wrapper.classes()).toContain('bg-destructive')
+  })
+
+  it('applies custom classes passed via props', () => {
+    const wrapper = mount(Button, {
+      props: {
+        class: 'custom-test-class',
+      },
+    })
+    expect(wrapper.classes()).toContain('custom-test-class')
+  })
+
+  it('triggers click event when clicked', async () => {
+    const wrapper = mount(Button)
+    await wrapper.trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('click')
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+})

package/template/src/components/ui/button/Button.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :data-variant="variant"
+    :data-size="size"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,41 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground font-medium border border-emerald-600/30 dark:border-emerald-500/40 shadow-xs hover:bg-primary/90 active:bg-primary/95 transition-colors",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/20 dark:border-input/40 dark:hover:bg-input/40",
+        secondary:
+          "bg-secondary text-secondary-foreground border border-border/50 hover:bg-secondary/80 hover:text-foreground shadow-xs",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-brand-500 hover:text-brand-600 dark:text-brand-400 dark:hover:text-brand-300 underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "xs": "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/template/src/components/ui/calendar/Calendar.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { CalendarRootEmits, CalendarRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNext,
+  CalendarPrev,
+  CalendarRoot,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { ChevronLeft, ChevronRight } from "@lucide/vue"
+
+const props = withDefaults(
+  defineProps<CalendarRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: undefined,
+    placeholder: undefined,
+  }
+)
+
+const emits = defineEmits<CalendarRootEmits>()
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    v-bind="forwarded"
+    data-slot="calendar"
+    :class="cn('p-3 rounded-xl border bg-card text-card-foreground shadow-xs select-none w-fit', props.class)"
+  >
+    <!-- Calendar Navigation Header -->
+    <CalendarHeader class="flex items-center justify-between pt-1 pb-3 px-1">
+      <CalendarPrev
+        class="inline-flex items-center justify-center h-7 w-7 rounded-lg border border-border bg-background text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors cursor-pointer"
+      >
+        <slot name="prev-icon">
+          <ChevronLeft class="h-4 w-4" />
+        </slot>
+      </CalendarPrev>
+
+      <CalendarHeading class="text-xs font-bold text-foreground capitalize tracking-tight" />
+
+      <CalendarNext
+        class="inline-flex items-center justify-center h-7 w-7 rounded-lg border border-border bg-background text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors cursor-pointer"
+      >
+        <slot name="next-icon">
+          <ChevronRight class="h-4 w-4" />
+        </slot>
+      </CalendarNext>
+    </CalendarHeader>
+
+    <!-- Month Day Grid -->
+    <div class="flex flex-col gap-y-4">
+      <CalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        class="w-full border-collapse space-y-1"
+      >
+        <!-- Weekday Head -->
+        <CalendarGridHead>
+          <CalendarGridRow class="flex">
+            <CalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              class="w-8 rounded-md text-[11px] font-medium text-muted-foreground text-center"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+
+        <!-- Days Body -->
+        <CalendarGridBody class="grid">
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            class="flex w-full mt-1"
+          >
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              class="relative p-0 text-center text-xs focus-within:relative focus-within:z-20 has-data-selected:bg-primary/10 first:has-data-selected:rounded-l-md last:has-data-selected:rounded-r-md"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+                class="inline-flex items-center justify-center h-8 w-8 rounded-lg text-xs font-medium text-foreground transition-all cursor-pointer hover:bg-muted/80 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring data-selected:bg-primary data-selected:text-primary-foreground data-selected:font-bold data-today:border data-today:border-primary/50 data-today:font-semibold data-outside-view:text-muted-foreground/40 data-disabled:text-muted-foreground/30 data-disabled:cursor-not-allowed"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>

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

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

package/template/src/components/ui/card/Card.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"]
+    flush?: boolean
+  }>(),
+  {
+    flush: false,
+  },
+)
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col rounded-lg border shadow-xs',
+        props.flush ? 'overflow-hidden py-0 gap-0' : 'py-6 gap-6',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/template/src/components/ui/card/CardAction.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/template/src/components/ui/card/CardContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-content"
+    :class="cn('px-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/template/src/components/ui/card/CardDescription.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>

package/template/src/components/ui/card/CardFooter.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/template/src/components/ui/card/CardHeader.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"]
+    section?: boolean
+  }>(),
+  {
+    section: false,
+  },
+)
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="
+      cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        props.section && 'p-6 border-b border-border bg-muted/10',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/template/src/components/ui/card/CardTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </h3>
+</template>

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

@@ -0,0 +1,7 @@
+export { default as Card } from "./Card.vue"
+export { default as CardAction } from "./CardAction.vue"
+export { default as CardContent } from "./CardContent.vue"
+export { default as CardDescription } from "./CardDescription.vue"
+export { default as CardFooter } from "./CardFooter.vue"
+export { default as CardHeader } from "./CardHeader.vue"
+export { default as CardTitle } from "./CardTitle.vue"

package/template/src/components/ui/chart/AreaChart.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VisXYContainer, VisArea, VisLine, VisAxis, VisTooltip, VisCrosshair } from '@unovis/vue'
+import { CurveType } from '@unovis/ts'
+
+interface Props {
+  data: Record<string, any>[]
+  index: string
+  categories: string[]
+  colors?: string[]
+  curveType?: CurveType
+  showGridLine?: boolean
+  showXAxis?: boolean
+  showYAxis?: boolean
+  showTooltip?: boolean
+  showLegend?: boolean
+  yFormatter?: (tick: number) => string
+  xFormatter?: (tick: number, i?: number) => string
+  opacity?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  colors: () => ['var(--primary)', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6'],
+  curveType: CurveType.MonotoneX,
+  showGridLine: false,
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: false,
+  opacity: 0.15,
+})
+
+const x = (_: any, i: number) => i
+
+function getColor(i: number): string {
+  return props.colors[i % props.colors.length]
+}
+
+const defaultYFormatter = (tick: number) => {
+  if (tick >= 1_000_000) return `${(tick / 1_000_000).toFixed(1)}M`
+  if (tick >= 1_000) return `${(tick / 1_000).toFixed(0)}k`
+  return `${tick}`
+}
+
+const defaultXFormatter = (i: number) => {
+  const d = props.data[i]
+  return d ? String(d[props.index]) : ''
+}
+
+const tooltipTemplate = computed(() => {
+  return (d: Record<string, any>) => {
+    if (!d) return ''
+    const title = d[props.index] ?? ''
+    const rows = props.categories
+      .map((cat, idx) => {
+        const val = d[cat]
+        const color = getColor(idx)
+        const formattedVal = typeof val === 'number' ? val.toLocaleString() : val
+        return `
+          <div class="flex items-center justify-between gap-4 text-xs py-0.5">
+            <span class="flex items-center gap-1.5 text-muted-foreground capitalize">
+              <span class="h-2 w-2 rounded-full shrink-0" style="background-color: ${color}"></span>
+              ${cat}
+            </span>
+            <span class="font-mono font-bold text-foreground">${formattedVal}</span>
+          </div>
+        `
+      })
+      .join('')
+
+    return `
+      <div class="rounded-lg border border-border bg-popover/95 backdrop-blur-md px-3 py-2 text-xs shadow-md min-w-36">
+        <div class="font-bold text-foreground mb-1.5 pb-1 border-b border-border/40">${title}</div>
+        <div class="space-y-0.5">${rows}</div>
+      </div>
+    `
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col">
+    <!-- Optional Legend -->
+    <div v-if="showLegend" class="flex flex-wrap items-center gap-4 mb-3 text-xs">
+      <div
+        v-for="(cat, idx) in categories"
+        :key="cat"
+        class="flex items-center gap-1.5 text-muted-foreground font-medium capitalize"
+      >
+        <span class="h-2.5 w-2.5 rounded-full" :style="{ backgroundColor: getColor(idx) }" />
+        <span>{{ cat }}</span>
+      </div>
+    </div>
+
+    <!-- Chart Container -->
+    <div class="flex-1 w-full min-h-45 relative">
+      <VisXYContainer :data="data" class="w-full h-full">
+        <!-- Area & Line series -->
+        <template v-for="(category, idx) in categories" :key="category">
+          <VisArea
+            :x="x"
+            :y="(d: any) => d[category]"
+            :color="getColor(idx)"
+            :opacity="opacity"
+            :curveType="curveType"
+          />
+          <VisLine
+            :x="x"
+            :y="(d: any) => d[category]"
+            :color="getColor(idx)"
+            :lineWidth="2"
+            :curveType="curveType"
+          />
+        </template>
+
+        <!-- X & Y Axes -->
+        <VisAxis
+          v-if="showXAxis"
+          type="x"
+          :tickFormat="xFormatter || defaultXFormatter"
+          :numTicks="data.length"
+          :gridLine="false"
+          :domainLine="false"
+          :tickLine="false"
+          tickTextColor="var(--muted-foreground)"
+        />
+        <VisAxis
+          v-if="showYAxis"
+          type="y"
+          :tickFormat="yFormatter || defaultYFormatter"
+          :numTicks="4"
+          :gridLine="showGridLine"
+          :domainLine="false"
+          :tickLine="false"
+          tickTextColor="var(--muted-foreground)"
+        />
+
+        <VisTooltip v-if="showTooltip" :attributes="{ 'data-unovis-tooltip': '' }" />
+        <VisCrosshair v-if="showTooltip" :template="tooltipTemplate" />
+      </VisXYContainer>
+    </div>
+  </div>
+</template>