@empathyds/vue 0.0.1

package/src/components/ui/carousel/Carousel.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useProvideCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+  orientation: "horizontal",
+})
+
+const emits = defineEmits<CarouselEmits>()
+
+const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
+
+defineExpose({
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+})
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft"
+  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight"
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    scrollNext()
+  }
+}
+</script>
+
+<template>
+  <div
+    data-slot="carousel"
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
+  </div>
+</template>

package/src/components/ui/carousel/CarouselContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useCarousel } from "./useCarousel"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<WithClassAsProps>()
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    ref="carouselRef"
+    data-slot="carousel-content"
+    class="overflow-hidden"
+  >
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          props.class,
+        )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/ui/carousel/CarouselItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useCarousel } from "./useCarousel"
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    data-slot="carousel-item"
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/carousel/CarouselNext.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import type { ButtonVariants } from '@/components/ui/button'
+import { ArrowRight } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+import { useCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+}
+& WithClassAsProps>(), {
+  variant: "outline",
+  size: "icon",
+})
+
+const { orientation, canScrollNext, scrollNext } = useCarousel()
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-next"
+    :disabled="!canScrollNext"
+    :class="cn(
+      'absolute size-8 rounded-full',
+      orientation === 'horizontal'
+        ? 'top-1/2 -right-12 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    :variant="variant"
+    :size="size"
+    @click="scrollNext"
+  >
+    <slot>
+      <ArrowRight />
+      <span class="sr-only">Next Slide</span>
+    </slot>
+  </Button>
+</template>

package/src/components/ui/carousel/CarouselPrevious.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import type { ButtonVariants } from '@/components/ui/button'
+import { ArrowLeft } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+import { useCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+}
+& WithClassAsProps>(), {
+  variant: "outline",
+  size: "icon",
+})
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-previous"
+    :disabled="!canScrollPrev"
+    :class="cn(
+      'absolute size-8 rounded-full',
+      orientation === 'horizontal'
+        ? 'top-1/2 -left-12 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    :variant="variant"
+    :size="size"
+    @click="scrollPrev"
+  >
+    <slot>
+      <ArrowLeft />
+      <span class="sr-only">Previous Slide</span>
+    </slot>
+  </Button>
+</template>

package/src/components/ui/carousel/index.ts

@@ -0,0 +1,10 @@
+export { default as Carousel } from "./Carousel.vue"
+export { default as CarouselContent } from "./CarouselContent.vue"
+export { default as CarouselItem } from "./CarouselItem.vue"
+export { default as CarouselNext } from "./CarouselNext.vue"
+export { default as CarouselPrevious } from "./CarouselPrevious.vue"
+export type {
+  UnwrapRefCarouselApi as CarouselApi,
+} from "./interface"
+
+export { useCarousel } from "./useCarousel"

package/src/components/ui/carousel/interface.ts

@@ -0,0 +1,26 @@
+import type useEmblaCarousel from "embla-carousel-vue"
+import type {
+  EmblaCarouselVueType,
+} from "embla-carousel-vue"
+import type { HTMLAttributes, UnwrapRef } from "vue"
+
+type CarouselApi = EmblaCarouselVueType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
+
+export interface CarouselProps {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+}
+
+export interface CarouselEmits {
+  (e: "init-api", payload: UnwrapRefCarouselApi): void
+}
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes["class"]
+}

package/src/components/ui/carousel/useCarousel.ts

@@ -0,0 +1,56 @@
+import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from "./interface"
+import { createInjectionState } from "@vueuse/core"
+import emblaCarouselVue from "embla-carousel-vue"
+import { onMounted, ref } from "vue"
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts,
+    orientation,
+    plugins,
+  }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue({
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    }, plugins)
+
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev()
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext()
+    }
+
+    const canScrollNext = ref(false)
+    const canScrollPrev = ref(false)
+
+    function onSelect(api: CarouselApi) {
+      canScrollNext.value = api?.canScrollNext() || false
+      canScrollPrev.value = api?.canScrollPrev() || false
+    }
+
+    onMounted(() => {
+      if (!emblaApi.value)
+        return
+
+      emblaApi.value?.on("init", onSelect)
+      emblaApi.value?.on("reInit", onSelect)
+      emblaApi.value?.on("select", onSelect)
+
+      emits("init-api", emblaApi.value)
+    })
+
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+  },
+)
+
+function useCarousel() {
+  const carouselState = useInjectCarousel()
+
+  if (!carouselState)
+    throw new Error("useCarousel must be used within a <Carousel />")
+
+  return carouselState
+}
+
+export { useCarousel, useProvideCarousel }

package/src/components/ui/chart/ChartContainer.vue

@@ -0,0 +1,59 @@
+<script lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { ChartConfig } from "."
+import { useId } from "reka-ui"
+import { computed, toRefs } from "vue"
+import { cn } from "@/lib/utils"
+import { provideChartContext } from "."
+import ChartStyle from "./ChartStyle.vue"
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  id?: HTMLAttributes["id"]
+  class?: HTMLAttributes["class"]
+  config: ChartConfig
+  cursor?: boolean
+}>()
+
+defineSlots<{
+  default: {
+    id: string
+    config: ChartConfig
+  }
+}>()
+
+const { config } = toRefs(props)
+const uniqueId = useId()
+const chartId = computed(() => `chart-${props.id || uniqueId.replace(/:/g, "")}`)
+
+provideChartContext({
+  id: uniqueId,
+  config,
+})
+</script>
+
+<template>
+  <div
+    data-slot="chart"
+    :data-chart="chartId"
+    :class="cn(
+      `[&_.tick_text]:!fill-muted-foreground [&_.tick_line]:!stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex flex-col aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden [&_[data-vis-xy-container]]:h-full [&_[data-vis-single-container]]:h-full h-full [&_[data-vis-xy-container]]:w-full [&_[data-vis-single-container]]:w-full w-full `,
+      props.class,
+    )"
+    :style="{
+      '--vis-tooltip-padding': '0px',
+      '--vis-tooltip-background-color': 'transparent',
+      '--vis-tooltip-border-color': 'transparent',
+      '--vis-tooltip-text-color': 'none',
+      '--vis-tooltip-shadow-color': 'none',
+      '--vis-tooltip-backdrop-filter': 'none',
+      '--vis-crosshair-circle-stroke-color': '#0000',
+      '--vis-crosshair-line-stroke-width': cursor ? '1px' : '0px',
+      '--vis-font-family': 'var(--font-sans)',
+    }"
+  >
+    <slot :id="uniqueId" :config="config" />
+    <ChartStyle :id="chartId" />
+  </div>
+</template>

package/src/components/ui/chart/ChartLegendContent.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { computed, onMounted, ref } from "vue"
+import { cn } from "@/lib/utils"
+import { useChart } from "."
+
+const props = withDefaults(defineProps<{
+  hideIcon?: boolean
+  nameKey?: string
+  verticalAlign?: "bottom" | "top"
+  // payload?: any[]
+  class?: HTMLAttributes["class"]
+}>(), {
+  verticalAlign: "bottom",
+})
+
+const { id, config } = useChart()
+
+const payload = computed(() => Object.entries(config.value).map(([key, value]) => {
+  return {
+    key: props.nameKey || key,
+    itemConfig: config.value[key],
+  }
+}))
+
+const containerSelector = ref("")
+onMounted(() => {
+  containerSelector.value = `[data-chart="chart-${id}"]>[data-vis-xy-container]`
+})
+</script>
+
+<template>
+  <div
+    v-if="containerSelector"
+    :class="cn(
+      'flex items-center justify-center gap-4',
+      verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+      props.class,
+    )"
+  >
+    <div
+      v-for="{ key, itemConfig } in payload"
+      :key="key"
+      :class="cn(
+        '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
+      )"
+    >
+      <component :is="itemConfig.icon" v-if="itemConfig?.icon" />
+      <div
+        v-else
+        class="h-2 w-2 shrink-0 rounded-[2px]"
+        :style="{
+          backgroundColor: itemConfig.color,
+        }"
+      />
+
+      {{ itemConfig?.label }}
+    </div>
+  </div>
+</template>

package/src/components/ui/chart/ChartStyle.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { computed } from "vue"
+import { THEMES, useChart } from "."
+
+defineProps<{
+  id?: HTMLAttributes["id"]
+}>()
+
+const { config } = useChart()
+
+const colorConfig = computed(() => {
+  return Object.entries(config.value).filter(
+    ([, config]) => config.theme || config.color,
+  )
+})
+</script>
+
+<template>
+  <Primitive
+    v-if="colorConfig.length"
+    as="style"
+  >
+    {{ Object.entries(THEMES)
+      .map(
+        ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color
+      = itemConfig.theme?.[theme as keyof typeof itemConfig.theme]
+      || itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+        .join("\n")}
+}
+`,
+      )
+      .join("\n") }}
+  </Primitive>
+</template>

package/src/components/ui/chart/ChartTooltipContent.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { ChartConfig } from "."
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<{
+  hideLabel?: boolean
+  hideIndicator?: boolean
+  indicator?: "line" | "dot" | "dashed"
+  nameKey?: string
+  labelKey?: string
+  labelFormatter?: (d: number | Date) => string
+  payload?: Record<string, any>
+  config?: ChartConfig
+  class?: HTMLAttributes["class"]
+  color?: string
+  x?: number | Date
+}>(), {
+  payload: () => ({}),
+  config: () => ({}),
+  indicator: "dot",
+})
+
+// TODO: currently we use `createElement` and `render` to render the
+// const chartContext = useChart(null)
+
+const payload = computed(() => {
+  return Object.entries(props.payload).map(([key, value]) => {
+    // const key = `${props.nameKey || item.name || item.dataKey || "value"}`
+    const itemConfig = props.config[key]
+    const indicatorColor = props.config[key]?.color ?? props.payload.fill
+
+    return { key, value, itemConfig, indicatorColor }
+  }).filter(i => i.itemConfig)
+})
+
+const nestLabel = computed(() => Object.keys(props.payload).length === 1 && props.indicator !== "dot")
+const tooltipLabel = computed(() => {
+  if (props.hideLabel)
+    return null
+  if (props.labelFormatter && props.x !== undefined) {
+    return props.labelFormatter(props.x)
+  }
+  return props.labelKey ? props.config[props.labelKey]?.label || props.payload[props.labelKey] : props.x
+})
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+      props.class,
+    )"
+  >
+    <slot>
+      <div v-if="!nestLabel && tooltipLabel" class="font-medium">
+        {{ tooltipLabel }}
+      </div>
+      <div class="grid gap-1.5">
+        <div
+          v-for="{ value, itemConfig, indicatorColor, key } in payload"
+          :key="key"
+          :class="
+            cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+               indicator === 'dot' && 'items-center')"
+        >
+          <component :is="itemConfig.icon" v-if="itemConfig?.icon" />
+          <template v-else-if="!hideIndicator">
+            <div
+              :class="cn(
+                'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                {
+                  'h-2.5 w-2.5': indicator === 'dot',
+                  'w-1': indicator === 'line',
+                  'w-0 border-[1.5px] border-dashed bg-transparent':
+                    indicator === 'dashed',
+                  'my-0.5': nestLabel && indicator === 'dashed',
+                },
+              )"
+              :style="{
+                '--color-bg': indicatorColor,
+                '--color-border': indicatorColor,
+              }"
+            />
+          </template>
+
+          <div :class="cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')">
+            <div class="grid gap-1.5">
+              <div v-if="nestLabel" class="font-medium">
+                {{ tooltipLabel }}
+              </div>
+              <span class="text-muted-foreground">
+                {{ itemConfig?.label || value }}
+              </span>
+            </div>
+            <span v-if="value" class="text-foreground font-mono font-medium tabular-nums">
+              {{ value.toLocaleString() }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>

package/src/components/ui/chart/index.ts

@@ -0,0 +1,29 @@
+import type { Component, Ref } from "vue"
+import { createContext } from "reka-ui"
+
+export { default as ChartContainer } from "./ChartContainer.vue"
+export { default as ChartLegendContent } from "./ChartLegendContent.vue"
+export { default as ChartTooltipContent } from "./ChartTooltipContent.vue"
+export { componentToString } from "./utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+export const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: string | Component
+    icon?: string | Component
+  } & (
+    | { color?: string, theme?: never }
+    | { color?: never, theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+interface ChartContextProps {
+  id: string
+  config: Ref<ChartConfig>
+}
+
+export const [useChart, provideChartContext] = createContext<ChartContextProps>("Chart")
+
+export { VisCrosshair as ChartCrosshair, VisTooltip as ChartTooltip } from "@unovis/vue"

package/src/components/ui/chart/utils.ts

@@ -0,0 +1,44 @@
+import type { ChartConfig } from "."
+import { isClient } from "@vueuse/core"
+import { useId } from "reka-ui"
+import { h, render } from "vue"
+
+// Simple cache using a Map to store serialized object keys
+const cache = new Map<string, string>()
+
+// Convert object to a consistent string key
+function serializeKey(key: Record<string, any>): string {
+  return JSON.stringify(key, Object.keys(key).sort())
+}
+
+interface Constructor<P = any> {
+  __isFragment?: never
+  __isTeleport?: never
+  __isSuspense?: never
+  new (...args: any[]): {
+    $props: P
+  }
+}
+
+export function componentToString<P>(config: ChartConfig, component: Constructor<P>, props?: P) {
+  if (!isClient)
+    return
+
+  // This function will be called once during mount lifecycle
+  const id = useId()
+
+  // https://unovis.dev/docs/auxiliary/Crosshair#component-props
+  return (_data: any, x: number | Date) => {
+    const data = "data" in _data ? _data.data : _data
+    const serializedKey = `${id}-${serializeKey(data)}`
+    const cachedContent = cache.get(serializedKey)
+    if (cachedContent)
+      return cachedContent
+
+    const vnode = h<unknown>(component, { ...props, payload: data, config, x })
+    const div = document.createElement("div")
+    render(vnode, div)
+    cache.set(serializedKey, div.innerHTML)
+    return div.innerHTML
+  }
+}

package/src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-slot="slotProps"
+    data-slot="checkbox"
+    v-bind="forwarded"
+    :class="
+      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+         props.class)"
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="grid place-content-center text-current transition-none"
+    >
+      <slot v-bind="slotProps">
+        <Check class="size-3.5" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/src/components/ui/checkbox/index.ts

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