@slexn/codecenter-ui 1.0.0

package/src/components/ui/network-graph/index.ts

@@ -0,0 +1,7 @@
+export { default as NetworkGraph } from "./NetworkGraph.vue"
+export type {
+  NetworkGraphLink,
+  NetworkGraphNode,
+  NetworkGraphSelectPayload,
+  NetworkGraphSize,
+} from "./NetworkGraph.vue"

package/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/src/components/ui/pagination/PaginationContent.vue

@@ -0,0 +1,24 @@
+<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/src/components/ui/pagination/PaginationEllipsis.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PaginationEllipsisProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { MoreHorizontalIcon } 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>
+      <MoreHorizontalIcon class="size-4" />
+      <span class="sr-only">More pages</span>
+    </slot>
+  </PaginationEllipsis>
+</template>

package/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 { ChevronsLeftIcon } 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 & {
+  class?: HTMLAttributes["class"]
+  size?: ButtonVariants["size"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationFirst
+    data-slot="pagination-first"
+    v-bind="forwarded"
+    :class="cn(buttonVariants({ variant: 'ghost', size: props.size }), 'gap-1 px-2.5', props.class)"
+  >
+    <slot>
+      <ChevronsLeftIcon />
+      <span class="hidden sm:block">First</span>
+    </slot>
+  </PaginationFirst>
+</template>

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

@@ -0,0 +1,39 @@
+<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 & {
+  class?: HTMLAttributes["class"]
+  isActive?: boolean
+  size?: ButtonVariants["size"]
+}>(), {
+  isActive: false,
+  size: "icon",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "isActive", "size")
+</script>
+
+<template>
+  <PaginationListItem
+    data-slot="pagination-item"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        buttonVariants({
+          variant: props.isActive ? 'outline' : 'ghost',
+          size: props.size,
+        }),
+        !props.isActive && 'data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:bg-background data-[selected=true]:shadow-xs',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </PaginationListItem>
+</template>

package/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 { ChevronsRightIcon } 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 & {
+  class?: HTMLAttributes["class"]
+  size?: ButtonVariants["size"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationLast
+    data-slot="pagination-last"
+    v-bind="forwarded"
+    :class="cn(buttonVariants({ variant: 'ghost', size: props.size }), 'gap-1 px-2.5', props.class)"
+  >
+    <slot>
+      <span class="hidden sm:block">Last</span>
+      <ChevronsRightIcon />
+    </slot>
+  </PaginationLast>
+</template>

package/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 & {
+  class?: HTMLAttributes["class"]
+  size?: ButtonVariants["size"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationNext
+    data-slot="pagination-next"
+    v-bind="forwarded"
+    :class="cn(buttonVariants({ variant: 'ghost', size: props.size }), 'gap-1 px-2.5', props.class)"
+  >
+    <slot>
+      <span class="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </slot>
+  </PaginationNext>
+</template>

package/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 & {
+  class?: HTMLAttributes["class"]
+  size?: ButtonVariants["size"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationPrev
+    data-slot="pagination-previous"
+    v-bind="forwarded"
+    :class="cn(buttonVariants({ variant: 'ghost', size: props.size }), 'gap-1 px-2.5', props.class)"
+  >
+    <slot>
+      <ChevronLeftIcon />
+      <span class="hidden sm:block">Previous</span>
+    </slot>
+  </PaginationPrev>
+</template>

package/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/src/components/ui/profile/Profile.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+export type ProfileBadgePlacement =
+  | "bottom-left"
+  | "bottom-right"
+  | "top-left"
+  | "top-right"
+
+export type ProfileBadgeVariant =
+  | "default"
+  | "destructive"
+  | "outline"
+  | "secondary"
+
+export type ProfileSize = "default" | "lg" | "sm" | "xl" | "xs"
+
+const props = withDefaults(
+  defineProps<{
+    alt?: string
+    avatarOnly?: boolean
+    badge?: boolean | number | string
+    badgeLabel?: string
+    badgePlacement?: ProfileBadgePlacement
+    badgeVariant?: ProfileBadgeVariant
+    class?: HTMLAttributes["class"]
+    contentClass?: HTMLAttributes["class"]
+    description?: string
+    descriptionClass?: HTMLAttributes["class"]
+    fallback?: string
+    name?: string
+    nameClass?: HTMLAttributes["class"]
+    shape?: "circle" | "rounded"
+    size?: ProfileSize
+    src?: string
+  }>(),
+  {
+    avatarOnly: false,
+    badgePlacement: "bottom-right",
+    badgeVariant: "default",
+    shape: "circle",
+    size: "default",
+  },
+)
+
+const imageFailed = ref(false)
+
+watch(
+  () => props.src,
+  () => {
+    imageFailed.value = false
+  },
+)
+
+const showImage = computed(() => Boolean(props.src) && !imageFailed.value)
+const showBadge = computed(
+  () =>
+    props.badge !== undefined &&
+    props.badge !== false &&
+    props.badge !== null,
+)
+const badgeText = computed(() => {
+  if (props.badge === true) return ""
+  if (!showBadge.value) return ""
+  return String(props.badge)
+})
+const resolvedFallback = computed(() => {
+  if (props.fallback) return props.fallback
+
+  const source = props.name ?? props.alt ?? "?"
+  const parts = source.trim().split(/\s+/).filter(Boolean)
+
+  if (parts.length >= 2) {
+    return `${Array.from(parts[0])[0] ?? ""}${Array.from(parts[1])[0] ?? ""}`.toUpperCase()
+  }
+
+  return Array.from(parts[0] ?? source).slice(0, 2).join("").toUpperCase()
+})
+
+function avatarClass() {
+  return cn(
+    "relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-muted font-medium text-muted-foreground",
+    props.shape === "circle" ? "rounded-full" : "rounded-md",
+    props.size === "xs" && "size-6 text-[10px]",
+    props.size === "sm" && "size-8 text-xs",
+    props.size === "default" && "size-10 text-sm",
+    props.size === "lg" && "size-12 text-base",
+    props.size === "xl" && "size-14 text-lg",
+  )
+}
+
+function contentClasses() {
+  return cn(
+    "grid min-w-0 max-w-40 gap-0.5",
+    props.size === "xs" && "gap-0",
+    props.size === "sm" && "gap-0",
+    props.contentClass,
+  )
+}
+
+function nameClasses() {
+  return cn(
+    "truncate font-medium leading-none text-foreground",
+    props.size === "xs" && "text-xs",
+    props.size === "sm" && "text-sm",
+    props.size === "default" && "text-sm",
+    props.size === "lg" && "text-base",
+    props.size === "xl" && "text-base",
+    props.nameClass,
+  )
+}
+
+function descriptionClasses() {
+  return cn(
+    "truncate leading-normal text-muted-foreground",
+    props.size === "xs" ? "text-[10px]" : "text-xs",
+    props.descriptionClass,
+  )
+}
+
+function badgeClass() {
+  const hasText = Boolean(badgeText.value)
+
+  return cn(
+    "absolute z-10 flex items-center justify-center border-2 border-background font-medium shadow-none",
+    props.badgePlacement === "bottom-right" &&
+      "bottom-0 right-0 translate-x-1/4 translate-y-1/4",
+    props.badgePlacement === "bottom-left" &&
+      "bottom-0 left-0 -translate-x-1/4 translate-y-1/4",
+    props.badgePlacement === "top-right" &&
+      "right-0 top-0 -translate-y-1/4 translate-x-1/4",
+    props.badgePlacement === "top-left" &&
+      "left-0 top-0 -translate-x-1/4 -translate-y-1/4",
+    props.badgeVariant === "default" && "bg-primary text-primary-foreground",
+    props.badgeVariant === "secondary" &&
+      "bg-secondary text-secondary-foreground",
+    props.badgeVariant === "destructive" &&
+      "bg-destructive text-destructive-foreground",
+    props.badgeVariant === "outline" && "bg-background text-foreground",
+    hasText
+      ? "h-5 min-w-5 rounded-full px-1 text-[10px] leading-none"
+      : "rounded-full",
+    !hasText && props.size === "xs" && "size-2.5",
+    !hasText && props.size === "sm" && "size-3",
+    !hasText && props.size === "default" && "size-3.5",
+    !hasText && props.size === "lg" && "size-4",
+    !hasText && props.size === "xl" && "size-4",
+  )
+}
+
+function handleImageError() {
+  imageFailed.value = true
+}
+</script>
+
+<template>
+  <div
+    data-slot="profile"
+    :data-size="props.size"
+    :data-avatar-only="props.avatarOnly ? '' : undefined"
+    :class="
+      cn(
+        'inline-flex min-w-0 items-center gap-3',
+        props.avatarOnly && 'gap-0',
+        props.class,
+      )
+    "
+  >
+    <span class="relative inline-flex shrink-0">
+      <span
+        data-slot="profile-avatar"
+        :class="avatarClass()"
+      >
+        <img
+          v-if="showImage"
+          data-slot="profile-image"
+          :alt="props.alt ?? props.name ?? ''"
+          class="size-full object-cover"
+          :src="props.src"
+          @error="handleImageError"
+        />
+        <span
+          v-else
+          data-slot="profile-fallback"
+        >
+          {{ resolvedFallback }}
+        </span>
+      </span>
+
+      <span
+        v-if="showBadge"
+        data-slot="profile-badge"
+        :aria-hidden="!props.badgeLabel && !badgeText ? 'true' : undefined"
+        :aria-label="props.badgeLabel"
+        :class="badgeClass()"
+      >
+        <span v-if="badgeText">{{ badgeText }}</span>
+      </span>
+    </span>
+
+    <span
+      v-if="!props.avatarOnly && (props.name || props.description)"
+      data-slot="profile-content"
+      :class="contentClasses()"
+    >
+      <span
+        v-if="props.name"
+        data-slot="profile-name"
+        :class="nameClasses()"
+        :title="props.name"
+      >
+        {{ props.name }}
+      </span>
+      <span
+        v-if="props.description"
+        data-slot="profile-description"
+        :class="descriptionClasses()"
+        :title="props.description"
+      >
+        {{ props.description }}
+      </span>
+    </span>
+  </div>
+</template>

package/src/components/ui/profile/ProfileGroup.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import Profile from "./Profile.vue"
+import type { ProfileSize } from "./Profile.vue"
+
+export interface ProfileGroupItem {
+  alt?: string
+  class?: HTMLAttributes["class"]
+  fallback?: string
+  name?: string
+  src?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    ariaLabel?: string
+    class?: HTMLAttributes["class"]
+    items?: ProfileGroupItem[]
+    limit?: number
+    size?: ProfileSize
+  }>(),
+  {
+    ariaLabel: "Profile group",
+    limit: 4,
+    size: "default",
+  },
+)
+
+const visibleItems = computed(() => props.items?.slice(0, props.limit) ?? [])
+const overflowCount = computed(() =>
+  Math.max((props.items?.length ?? 0) - props.limit, 0),
+)
+
+function itemClass(index: number, className?: HTMLAttributes["class"]) {
+  return cn(
+    "rounded-full ring-2 ring-background",
+    index > 0 && props.size === "xs" && "-ml-2.5",
+    index > 0 && props.size === "sm" && "-ml-3.5",
+    index > 0 && props.size === "default" && "-ml-4",
+    index > 0 && props.size === "lg" && "-ml-5",
+    index > 0 && props.size === "xl" && "-ml-6",
+    className,
+  )
+}
+</script>
+
+<template>
+  <div
+    data-slot="profile-group"
+    :aria-label="props.ariaLabel"
+    :class="
+      cn(
+        'flex items-center [&_[data-slot=profile-badge]]:hidden [&>[data-slot=profile]]:rounded-full [&>[data-slot=profile]]:ring-2 [&>[data-slot=profile]]:ring-background',
+        props.size === 'xs' &&
+          '[&>[data-slot=profile]:not(:first-child)]:-ml-2.5',
+        props.size === 'sm' &&
+          '[&>[data-slot=profile]:not(:first-child)]:-ml-3.5',
+        props.size === 'default' &&
+          '[&>[data-slot=profile]:not(:first-child)]:-ml-4',
+        props.size === 'lg' &&
+          '[&>[data-slot=profile]:not(:first-child)]:-ml-5',
+        props.size === 'xl' &&
+          '[&>[data-slot=profile]:not(:first-child)]:-ml-6',
+        props.class,
+      )
+    "
+    role="group"
+  >
+    <template v-if="visibleItems.length > 0">
+      <Profile
+        v-for="(item, index) in visibleItems"
+        :key="item.name ?? item.src ?? item.fallback ?? index"
+        :alt="item.alt"
+        avatar-only
+        :class="itemClass(index, item.class)"
+        :fallback="item.fallback"
+        :name="item.name"
+        :size="props.size"
+        :src="item.src"
+      />
+
+      <Profile
+        v-if="overflowCount > 0"
+        :aria-label="`${overflowCount} more profiles`"
+        avatar-only
+        :class="itemClass(visibleItems.length)"
+        :fallback="`+${overflowCount}`"
+        :size="props.size"
+      />
+    </template>
+
+    <slot v-else />
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+export { default as Profile } from "./Profile.vue"
+export { default as ProfileGroup } from "./ProfileGroup.vue"
+export type {
+  ProfileBadgePlacement,
+  ProfileBadgeVariant,
+  ProfileSize,
+} from "./Profile.vue"
+export type { ProfileGroupItem } from "./ProfileGroup.vue"