@slexn/codecenter-ui 1.0.0

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

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+import {
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
+  useOptionalSidebar,
+} from "./context"
+import type { SidebarProps } from "./types"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  collapsible: "offcanvas",
+  side: "left",
+  variant: "sidebar",
+})
+
+const sidebar = useOptionalSidebar()
+
+const state = computed(() => sidebar?.state.value ?? "expanded")
+const isMobile = computed(() => sidebar?.isMobile.value ?? false)
+const isMobileOpen = computed(() => sidebar?.openMobile.value ?? false)
+const dataCollapsible = computed(() =>
+  state.value === "collapsed" ? props.collapsible : "",
+)
+
+function closeMobile() {
+  sidebar?.setOpenMobile(false)
+}
+</script>
+
+<template>
+  <aside
+    v-if="props.collapsible === 'none'"
+    data-slot="sidebar"
+    data-state="expanded"
+    data-collapsible=""
+    :data-side="props.side"
+    :data-variant="props.variant"
+    :style="{
+      '--sidebar-width': SIDEBAR_WIDTH,
+      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      '--sidebar-width-mobile': SIDEBAR_WIDTH_MOBILE,
+    }"
+    :class="cn('flex h-full w-(--sidebar-width) shrink-0 flex-col border-r bg-background text-foreground', props.side === 'right' && 'border-r-0 border-l', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </aside>
+
+  <div
+    v-else-if="isMobile"
+    data-slot="sidebar-mobile"
+    :style="{
+      '--sidebar-width': SIDEBAR_WIDTH,
+      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      '--sidebar-width-mobile': SIDEBAR_WIDTH_MOBILE,
+    }"
+  >
+    <button
+      v-if="isMobileOpen"
+      data-slot="sidebar-mobile-overlay"
+      type="button"
+      class="fixed inset-0 z-50 bg-[var(--overlay)] backdrop-blur-[4px] [-webkit-backdrop-filter:blur(4px)] md:hidden"
+      aria-label="Close sidebar"
+      @click="closeMobile"
+    />
+    <aside
+      v-if="isMobileOpen"
+      data-slot="sidebar"
+      data-mobile="true"
+      :data-state="state"
+      :data-side="props.side"
+      :data-variant="props.variant"
+      :class="
+        cn(
+          'fixed inset-y-0 z-50 flex w-(--sidebar-width-mobile) max-w-[calc(100vw-2rem)] flex-col bg-background text-foreground shadow-lg md:hidden',
+          props.side === 'left' ? 'left-0 border-r' : 'right-0 border-l',
+          props.class,
+        )
+      "
+      v-bind="$attrs"
+    >
+      <slot />
+    </aside>
+  </div>
+
+  <div
+    v-else
+    data-slot="sidebar"
+    class="group peer hidden text-foreground md:block"
+    :data-state="state"
+    :data-collapsible="dataCollapsible"
+    :data-side="props.side"
+    :data-variant="props.variant"
+    :style="{
+      '--sidebar-width': SIDEBAR_WIDTH,
+      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      '--sidebar-width-mobile': SIDEBAR_WIDTH_MOBILE,
+    }"
+  >
+    <div
+      data-slot="sidebar-gap"
+      :class="
+        cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          props.variant === 'floating' || props.variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )
+      "
+    />
+    <div
+      data-slot="sidebar-container"
+      :class="
+        cn(
+          'fixed inset-y-0 z-10 hidden h-dvh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          props.side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          props.variant === 'floating' || props.variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          props.class,
+        )
+      "
+      v-bind="$attrs"
+    >
+      <aside
+        data-sidebar="sidebar"
+        class="flex h-full w-full flex-col bg-background group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm group-data-[variant=inset]:rounded-lg group-data-[variant=inset]:border group-data-[variant=inset]:shadow-xs"
+      >
+        <slot />
+      </aside>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<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="sidebar-content"
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<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="sidebar-footer"
+    data-sidebar="footer"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<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="sidebar-group"
+    data-sidebar="group"
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,31 @@
+<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 = withDefaults(defineProps<PrimitiveProps & {
+  class?: HTMLAttributes["class"]
+}>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-action"
+    data-sidebar="group-action"
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="
+      cn(
+        'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,18 @@
+<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="sidebar-group-content"
+    data-sidebar="group-content"
+    :class="cn('w-full text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,30 @@
+<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 = withDefaults(defineProps<PrimitiveProps & {
+  class?: HTMLAttributes["class"]
+}>(), {
+  as: "div",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-label"
+    data-sidebar="group-label"
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="
+      cn(
+        'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-muted-foreground outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,18 @@
+<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="sidebar-header"
+    data-sidebar="header"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <input
+    data-slot="sidebar-input"
+    data-sidebar="input"
+    :class="
+      cn(
+        'flex h-8 w-full min-w-0 rounded-md border border-input bg-background px-2.5 py-1 text-sm text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <main
+    data-slot="sidebar-inset"
+    :class="
+      cn(
+        'relative flex min-w-0 flex-1 flex-col bg-background',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:shadow-xs md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </main>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu"
+    data-sidebar="menu"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
+  >
+    <slot />
+  </ul>
+</template>

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

@@ -0,0 +1,34 @@
+<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 = withDefaults(defineProps<PrimitiveProps & {
+  class?: HTMLAttributes["class"]
+  showOnHover?: boolean
+}>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-action"
+    data-sidebar="menu-action"
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="
+      cn(
+        'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted-foreground outline-none transition-[color,opacity] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring peer-hover/menu-button:text-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1 peer-data-[size=lg]/menu-button:top-3',
+        'group-data-[collapsible=icon]:hidden',
+        props.showOnHover && 'opacity-100 md:opacity-0 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:opacity-100',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,25 @@
+<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="sidebar-menu-badge"
+    data-sidebar="menu-badge"
+    :class="
+      cn(
+        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-muted-foreground peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-3',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import SidebarMenuButtonChild, {
+  type SidebarMenuButtonProps,
+} from "./SidebarMenuButtonChild.vue"
+import { useOptionalSidebar } from "./context"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps & {
+  tooltip?: string
+}>(), {
+  as: "button",
+  size: "default",
+  variant: "default",
+})
+
+const sidebar = useOptionalSidebar()
+const delegatedProps = reactiveOmit(props, "tooltip")
+const tooltipTitle = computed(() =>
+  props.tooltip && sidebar?.state.value === "collapsed" && !sidebar?.isMobile.value
+    ? props.tooltip
+    : undefined,
+)
+</script>
+
+<template>
+  <SidebarMenuButtonChild
+    v-bind="{ ...delegatedProps, ...$attrs }"
+    :title="tooltipTitle"
+  >
+    <slot />
+  </SidebarMenuButtonChild>
+</template>

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

@@ -0,0 +1,38 @@
+<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"
+import {
+  sidebarMenuButtonVariants,
+  type SidebarMenuButtonVariants,
+} from "./variants"
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  class?: HTMLAttributes["class"]
+  isActive?: boolean
+  size?: SidebarMenuButtonVariants["size"]
+  variant?: SidebarMenuButtonVariants["variant"]
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+  as: "button",
+  size: "default",
+  variant: "default",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-button"
+    data-sidebar="menu-button"
+    :data-active="props.isActive ? 'true' : undefined"
+    :data-size="props.size"
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="cn(sidebarMenuButtonVariants({ size: props.size, variant: props.variant }), props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="sidebar-menu-item"
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-sub"
+    :class="cn('mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden', props.class)"
+  >
+    <slot />
+  </ul>
+</template>

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

@@ -0,0 +1,36 @@
+<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 = withDefaults(defineProps<PrimitiveProps & {
+  class?: HTMLAttributes["class"]
+  isActive?: boolean
+  size?: "md" | "sm"
+}>(), {
+  as: "a",
+  size: "md",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-sub-button"
+    data-sidebar="menu-sub-button"
+    :as="props.as"
+    :as-child="props.asChild"
+    :data-active="props.isActive ? 'true' : undefined"
+    :data-size="props.size"
+    :class="
+      cn(
+        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring 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]:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        props.size === 'sm' ? 'text-xs' : 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="sidebar-menu-sub-item"
+    data-sidebar="menu-sub-item"
+    :class="cn('group/menu-sub-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>