@slexn/codecenter-ui 1.0.0

package/src/components/ui/sidebar/SidebarProvider.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
+import { useEventListener, useMediaQuery } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+import {
+  provideSidebarContext,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_STORAGE_KEY,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
+} from "./context"
+
+export interface SidebarProviderProps {
+  class?: HTMLAttributes["class"]
+  defaultOpen?: boolean
+  keyboardShortcut?: string
+  open?: boolean
+  persist?: boolean
+  storageKey?: string
+}
+
+const props = withDefaults(defineProps<SidebarProviderProps>(), {
+  defaultOpen: true,
+  keyboardShortcut: SIDEBAR_KEYBOARD_SHORTCUT,
+  open: undefined,
+  persist: false,
+  storageKey: SIDEBAR_STORAGE_KEY,
+})
+
+const emits = defineEmits<{
+  "update:open": [open: boolean]
+}>()
+
+const isMobile = useMediaQuery("(max-width: 768px)")
+const openMobile = ref(false)
+const uncontrolledOpen = ref(props.defaultOpen)
+const open = computed({
+  get: () => props.open ?? uncontrolledOpen.value,
+  set: (value: boolean) => {
+    uncontrolledOpen.value = value
+    emits("update:open", value)
+  },
+})
+
+const state = computed(() => open.value ? "expanded" : "collapsed")
+
+function setOpen(value: boolean) {
+  open.value = value
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value
+}
+
+function toggleSidebar() {
+  if (isMobile.value) {
+    setOpenMobile(!openMobile.value)
+    return
+  }
+
+  setOpen(!open.value)
+}
+
+function isSidebarShortcut(event: KeyboardEvent) {
+  if (!props.keyboardShortcut) return false
+
+  return event.key.toLowerCase() === props.keyboardShortcut.toLowerCase()
+    && (event.metaKey || event.ctrlKey)
+}
+
+onMounted(() => {
+  if (!props.persist || props.open !== undefined) return
+
+  const storedValue = window.localStorage.getItem(props.storageKey)
+
+  if (storedValue === "true" || storedValue === "false") {
+    setOpen(storedValue === "true")
+  }
+})
+
+watch(open, (value) => {
+  if (!props.persist) return
+
+  window.localStorage.setItem(props.storageKey, String(value))
+})
+
+useEventListener("keydown", (event: KeyboardEvent) => {
+  if (!isSidebarShortcut(event)) return
+
+  event.preventDefault()
+  toggleSidebar()
+})
+
+provideSidebarContext({
+  isMobile,
+  open,
+  openMobile,
+  setOpen,
+  setOpenMobile,
+  state,
+  toggleSidebar,
+})
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-wrapper"
+    :style="{
+      '--sidebar-width': SIDEBAR_WIDTH,
+      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      '--sidebar-width-mobile': SIDEBAR_WIDTH_MOBILE,
+    }"
+    :class="cn('group/sidebar-wrapper flex min-h-svh w-full bg-background text-foreground', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/sidebar/SidebarRail.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { useSidebar } from "./context"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button
+    data-slot="sidebar-rail"
+    data-sidebar="rail"
+    type="button"
+    aria-label="Toggle sidebar"
+    title="Toggle sidebar"
+    tabindex="-1"
+    :class="
+      cn(
+        '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-0.5 hover:after:bg-border sm:flex',
+        'group-data-[side=left]:-right-4 group-data-[side=right]:left-0',
+        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        props.class,
+      )
+    "
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/ui/sidebar/SidebarSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Separator } from "../separator"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Separator
+    data-slot="sidebar-separator"
+    data-sidebar="separator"
+    decorative
+    :class="cn('mx-2 w-auto', props.class)"
+  />
+</template>

package/src/components/ui/sidebar/SidebarTrigger.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { PanelLeftIcon } from "@lucide/vue"
+import { cn } from "@/lib/utils"
+import { Button } from "../button"
+import { useSidebar } from "./context"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <Button
+    data-slot="sidebar-trigger"
+    data-sidebar="trigger"
+    type="button"
+    variant="ghost"
+    size="icon-sm"
+    :class="cn(props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeftIcon aria-hidden="true" />
+    <span class="sr-only">Toggle sidebar</span>
+  </Button>
+</template>

package/src/components/ui/sidebar/context.ts

@@ -0,0 +1,39 @@
+import type { ComputedRef, InjectionKey, Ref } from "vue"
+import { inject, provide } from "vue"
+import type { SidebarState } from "./types"
+
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+export const SIDEBAR_STORAGE_KEY = "sidebar_state"
+export const SIDEBAR_WIDTH = "16rem"
+export const SIDEBAR_WIDTH_ICON = "3.25rem"
+export const SIDEBAR_WIDTH_MOBILE = "18rem"
+
+export interface SidebarContext {
+  isMobile: Ref<boolean>
+  open: Ref<boolean>
+  openMobile: Ref<boolean>
+  setOpen: (value: boolean) => void
+  setOpenMobile: (value: boolean) => void
+  state: ComputedRef<SidebarState>
+  toggleSidebar: () => void
+}
+
+const sidebarContextKey: InjectionKey<SidebarContext> = Symbol("SidebarContext")
+
+export function provideSidebarContext(context: SidebarContext) {
+  provide(sidebarContextKey, context)
+}
+
+export function useOptionalSidebar() {
+  return inject(sidebarContextKey, null)
+}
+
+export function useSidebar() {
+  const context = useOptionalSidebar()
+
+  if (!context) {
+    throw new Error("Sidebar components must be used within a SidebarProvider.")
+  }
+
+  return context
+}

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

@@ -0,0 +1,43 @@
+export { default as Sidebar } from "./Sidebar.vue"
+export { default as SidebarContent } from "./SidebarContent.vue"
+export { default as SidebarFooter } from "./SidebarFooter.vue"
+export { default as SidebarGroup } from "./SidebarGroup.vue"
+export { default as SidebarGroupAction } from "./SidebarGroupAction.vue"
+export { default as SidebarGroupContent } from "./SidebarGroupContent.vue"
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue"
+export { default as SidebarHeader } from "./SidebarHeader.vue"
+export { default as SidebarInput } from "./SidebarInput.vue"
+export { default as SidebarInset } from "./SidebarInset.vue"
+export { default as SidebarMenu } from "./SidebarMenu.vue"
+export { default as SidebarMenuAction } from "./SidebarMenuAction.vue"
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue"
+export { default as SidebarMenuButton } from "./SidebarMenuButton.vue"
+export { default as SidebarMenuButtonChild } from "./SidebarMenuButtonChild.vue"
+export { default as SidebarMenuItem } from "./SidebarMenuItem.vue"
+export { default as SidebarMenuSub } from "./SidebarMenuSub.vue"
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue"
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue"
+export { default as SidebarProvider } from "./SidebarProvider.vue"
+export { default as SidebarRail } from "./SidebarRail.vue"
+export { default as SidebarSeparator } from "./SidebarSeparator.vue"
+export { default as SidebarTrigger } from "./SidebarTrigger.vue"
+export {
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_STORAGE_KEY,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
+  useOptionalSidebar,
+  useSidebar,
+} from "./context"
+export {
+  sidebarMenuButtonVariants,
+  type SidebarMenuButtonVariants,
+} from "./variants"
+export type {
+  SidebarCollapsible,
+  SidebarProps,
+  SidebarSide,
+  SidebarState,
+  SidebarVariant,
+} from "./types"

package/src/components/ui/sidebar/types.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "vue"
+
+export type SidebarCollapsible = "offcanvas" | "icon" | "none"
+export type SidebarSide = "left" | "right"
+export type SidebarState = "collapsed" | "expanded"
+export type SidebarVariant = "floating" | "inset" | "sidebar"
+
+export interface SidebarProps {
+  class?: HTMLAttributes["class"]
+  collapsible?: SidebarCollapsible
+  side?: SidebarSide
+  variant?: SidebarVariant
+}

package/src/components/ui/sidebar/variants.ts

@@ -0,0 +1,25 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full min-w-0 items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-ring transition-[background-color,color,width,height,padding] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground group-data-[collapsible=icon]:size-9 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:[&>span:last-child]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        default: "h-8 text-sm",
+        lg: "h-11 text-sm group-data-[collapsible=icon]:p-0",
+        sm: "h-7 text-xs",
+      },
+      variant: {
+        default: "hover:bg-accent hover:text-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--border)] hover:bg-accent hover:text-accent-foreground hover:shadow-[0_0_0_1px_var(--accent)]",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+  },
+)
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>

package/src/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+export type SkeletonVariant = "block" | "text" | "circle"
+
+export interface SkeletonProps {
+  animated?: boolean
+  as?: string
+  class?: HTMLAttributes["class"]
+  decorative?: boolean
+  label?: string
+  variant?: SkeletonVariant
+}
+
+const props = withDefaults(defineProps<SkeletonProps>(), {
+  animated: true,
+  as: "div",
+  decorative: true,
+  label: "Loading",
+  variant: "block",
+})
+
+const variantClass = computed(() => {
+  if (props.variant === "circle") return "size-10 rounded-full"
+  if (props.variant === "text") return "h-4 w-full rounded"
+
+  return "h-24 w-full rounded-md"
+})
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    data-slot="skeleton"
+    :data-animated="props.animated ? 'true' : 'false'"
+    :data-variant="props.variant"
+    :aria-hidden="props.decorative ? 'true' : undefined"
+    :aria-label="props.decorative ? undefined : props.label"
+    :class="
+      cn(
+        'block shrink-0 bg-muted',
+        variantClass,
+        props.animated && 'animate-pulse',
+        props.class,
+      )
+    "
+    :role="props.decorative ? undefined : 'status'"
+  >
+    <span v-if="!props.decorative" class="sr-only">{{ props.label }}</span>
+  </component>
+</template>

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

@@ -0,0 +1,5 @@
+export { default as Skeleton } from "./Skeleton.vue"
+export type {
+  SkeletonProps,
+  SkeletonVariant,
+} from "./Skeleton.vue"

package/src/components/ui/sonner/Sonner.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { ToasterProps } from "vue-sonner"
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "@lucide/vue"
+import { Toaster as Sonner } from "vue-sonner"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<ToasterProps>(), {
+  closeButtonPosition: "top-right",
+})
+</script>
+
+<template>
+  <Sonner
+    :class="cn('toaster group', props.class)"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      '--border-radius': 'var(--radius)',
+    }"
+    v-bind="props"
+  >
+    <template #success-icon>
+      <CircleCheckIcon class="size-4" />
+    </template>
+    <template #info-icon>
+      <InfoIcon class="size-4" />
+    </template>
+    <template #warning-icon>
+      <TriangleAlertIcon class="size-4" />
+    </template>
+    <template #error-icon>
+      <OctagonXIcon class="size-4" />
+    </template>
+    <template #loading-icon>
+      <div>
+        <Loader2Icon class="size-4 animate-spin" />
+      </div>
+    </template>
+    <template #close-icon>
+      <XIcon class="size-4" />
+    </template>
+  </Sonner>
+</template>
+
+<style>
+[data-sonner-toaster] [data-close-button-position="top-right"] {
+  --toast-close-button-right: 0.625rem;
+  --toast-close-button-top: 0.625rem;
+  --toast-close-button-transform: none;
+}
+
+[data-sonner-toast][data-styled="true"]:has([data-close-button]) {
+  padding-right: 2.75rem;
+}
+
+[data-sonner-toast][data-styled="true"] [data-close-button] {
+  background: transparent;
+  border-color: transparent;
+  border-radius: 0;
+  color: currentColor;
+}
+
+[data-sonner-toast][data-styled="true"]:hover [data-close-button]:hover,
+[data-sonner-toaster][data-sonner-theme="dark"] [data-sonner-toast] [data-close-button]:hover {
+  background: transparent;
+  border-color: transparent;
+}
+</style>

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

@@ -0,0 +1,12 @@
+export { default as Toaster } from "./Sonner.vue"
+export {
+  toast,
+  useVueSonner,
+  type Action,
+  type ExternalToast,
+  type PromiseIExtendedResult,
+  type ToastClasses,
+  type ToastT,
+  type ToastToDismiss,
+  type ToasterProps,
+} from "vue-sonner"

package/src/components/ui/spinner/Spinner.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes["class"]
+    label?: string
+    decorative?: boolean
+  }>(),
+  {
+    label: "Loading",
+    decorative: false,
+  },
+)
+</script>
+
+<template>
+  <span
+    data-slot="spinner"
+    :aria-hidden="props.decorative ? 'true' : undefined"
+    :aria-label="props.decorative ? undefined : props.label"
+    :class="
+      cn(
+        'inline-block size-4 shrink-0 animate-spin rounded-full border-2 border-current border-r-transparent align-[-0.125em]',
+        props.class,
+      )
+    "
+    :role="props.decorative ? undefined : 'status'"
+  >
+    <span v-if="!props.decorative" class="sr-only">{{ props.label }}</span>
+  </span>
+</template>

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

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

package/src/components/ui/stepper/Stepper.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { StepperRootEmits, StepperRootProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperRoot as StepperPrimitiveRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<StepperRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <StepperPrimitiveRoot
+    v-slot="slotProps"
+    data-slot="stepper"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'flex w-full items-start gap-2 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',
+        props.class,
+      )
+    "
+  >
+    <slot v-bind="slotProps" />
+  </StepperPrimitiveRoot>
+</template>

package/src/components/ui/stepper/StepperDescription.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { StepperDescriptionProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  StepperDescription as StepperPrimitiveDescription,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperPrimitiveDescription
+    data-slot="stepper-description"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-xs leading-relaxed text-muted-foreground transition-colors group-data-[state=active]:text-foreground group-data-[disabled]:text-muted-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </StepperPrimitiveDescription>
+</template>

package/src/components/ui/stepper/StepperIndicator.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { StepperIndicatorProps } from "reka-ui"
+import { computed } from "vue"
+import { Check } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  injectStepperItemContext,
+  StepperIndicator as StepperPrimitiveIndicator,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes["class"] }>()
+
+defineSlots<{
+  default?: (props: { state: "active" | "completed" | "inactive"; step: number }) => unknown
+}>()
+
+const itemContext = injectStepperItemContext()
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+const step = computed(() => itemContext.step.value)
+const state = computed(() => itemContext.state.value)
+</script>
+
+<template>
+  <StepperPrimitiveIndicator
+    data-slot="stepper-indicator"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input bg-background text-muted-foreground relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium transition-[background-color,border-color,color,box-shadow] group-data-[state=active]:border-primary group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground group-data-[state=completed]:border-primary group-data-[state=completed]:bg-primary group-data-[state=completed]:text-primary-foreground group-data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot
+      :state="state"
+      :step="step"
+    >
+      <Check
+        v-if="state === 'completed'"
+        aria-hidden="true"
+        class="size-4"
+      />
+      <span v-else>{{ step }}</span>
+    </slot>
+  </StepperPrimitiveIndicator>
+</template>

package/src/components/ui/stepper/StepperItem.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { StepperItemProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperItem as StepperPrimitiveItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperPrimitiveItem
+    v-slot="slotProps"
+    data-slot="stepper-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group relative flex min-w-0 flex-1 flex-col items-center text-center data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-start data-[orientation=vertical]:text-left',
+        props.class,
+      )
+    "
+  >
+    <slot v-bind="slotProps" />
+  </StepperPrimitiveItem>
+</template>

package/src/components/ui/stepper/StepperSeparator.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { StepperSeparatorProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperSeparator as StepperPrimitiveSeparator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperPrimitiveSeparator
+    data-slot="stepper-separator"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'bg-muted pointer-events-none z-0 transition-colors data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:flex-1 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:self-stretch group-data-[state=completed]:bg-primary',
+        props.class,
+      )
+    "
+  />
+</template>