@vestow/vue 0.1.0

package/src/components/separator/Separator.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { Separator } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<SeparatorProps & ClassProps>(),
+  { orientation: 'horizontal', decorative: true },
+)
+</script>
+
+<template>
+  <Separator
+    :orientation="props.orientation"
+    :decorative="props.decorative"
+    :class="cn(
+      'shrink-0 bg-border',
+      props.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full',
+      props.class,
+    )"
+  >
+    <slot />
+  </Separator>
+</template>

package/src/components/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'

package/src/components/sheet/Sheet.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

package/src/components/sheet/SheetClose.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

package/src/components/sheet/SheetContent.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { SheetContentVariants } from './index'
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { X } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { sheetContentVariants } from './index'
+
+const props = withDefaults(
+  defineProps<DialogContentProps & ClassProps & {
+    side?: SheetContentVariants['side']
+    hideClose?: boolean
+  }>(),
+  { side: 'right', hideClose: false },
+)
+const emits = defineEmits<DialogContentEmits>()
+const { t } = useI18n()
+const delegated = computed(() => {
+  const { class: _class, side: _side, hideClose: _hideClose, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-(--z-overlay) bg-foreground/40 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    />
+    <DialogContent v-bind="forwarded" :class="cn(sheetContentVariants({ side }), props.class)">
+      <slot />
+      <DialogClose
+        v-if="!hideClose"
+        class="absolute right-4 top-4 rounded-sm p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <X class="size-4" />
+        <span class="sr-only">{{ t('ui.close') }}</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/src/components/sheet/SheetDescription.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DialogDescription } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<DialogDescriptionProps & ClassProps>()
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <DialogDescription v-bind="delegated" :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </DialogDescription>
+</template>

package/src/components/sheet/SheetFooter.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div :class="cn('mt-auto flex shrink-0 flex-col-reverse gap-2 border-t border-border px-6 py-4 sm:flex-row sm:justify-end', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/sheet/SheetHeader.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div :class="cn('flex shrink-0 flex-col gap-1.5 border-b border-border px-6 py-4 pr-12', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/sheet/SheetTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DialogTitle } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<DialogTitleProps & ClassProps>()
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <DialogTitle v-bind="delegated" :class="cn('text-base font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </DialogTitle>
+</template>

package/src/components/sheet/SheetTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

package/src/components/sheet/index.ts

@@ -0,0 +1,10 @@
+export { sheetContentVariants, type SheetContentVariants } from '../../variants/components/sheet'
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+
+export { default as SheetTrigger } from './SheetTrigger.vue'

package/src/components/sidebar/Sidebar.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { ClassProps } from '../../lib/types'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { cn } from '../../lib/utils'
+import Sheet from '../sheet/Sheet.vue'
+import SheetContent from '../sheet/SheetContent.vue'
+import SheetDescription from '../sheet/SheetDescription.vue'
+import SheetHeader from '../sheet/SheetHeader.vue'
+import SheetTitle from '../sheet/SheetTitle.vue'
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './context'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    side?: 'left' | 'right'
+    variant?: 'sidebar' | 'floating' | 'inset'
+    collapsible?: 'offcanvas' | 'icon' | 'none'
+  }>(),
+  { side: 'left', variant: 'sidebar', collapsible: 'offcanvas' },
+)
+
+const { t } = useI18n()
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+const mobileStyle = computed<CSSProperties>(() => ({ '--sidebar-width': SIDEBAR_WIDTH_MOBILE } as CSSProperties))
+
+/**
+ * Khe giữ chỗ trên desktop.
+ *
+ * Cột thật là `position: fixed` nên nó không chiếm chỗ trong luồng; div này mới
+ * là thứ đẩy nội dung sang phải. Hai cái phải rộng bằng nhau, và cùng chuyển
+ * động 200ms, nếu không nội dung trượt lệch nhịp với sidebar.
+ */
+const gapClass = computed(() => cn(
+  'relative w-(--sidebar-width) bg-transparent transition-[width] duration-(--duration-base) ease-linear',
+  'group-data-[collapsible=offcanvas]:w-0',
+  'group-data-[side=right]:rotate-180',
+  props.variant === 'floating' || props.variant === 'inset'
+    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+))
+
+const containerClass = computed(() => cn(
+  'fixed inset-y-0 z-(--z-raised) hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-(--duration-base) 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)+(--spacing(4))+2px)]'
+    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+  props.class,
+))
+</script>
+
+<template>
+  <!-- `collapsible="none"`: cột cứng, không gập, không có bản mobile. -->
+  <div
+    v-if="collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', props.class)"
+  >
+    <slot />
+  </div>
+
+  <!-- Dưới `md` sidebar là ngăn kéo. Nút đóng của Sheet bị tắt vì bản thiết kế
+       đóng bằng cách bấm ra ngoài hoặc bấm lại nút mở. -->
+  <Sheet v-else-if="isMobile" :open="openMobile" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      :side="side"
+      hide-close
+      :style="mobileStyle"
+      class="w-(--sidebar-width) max-w-none border-none bg-sidebar p-0 text-sidebar-foreground"
+    >
+      <SheetHeader class="sr-only">
+        <SheetTitle>{{ t('ui.sidebar.title') }}</SheetTitle>
+        <SheetDescription>{{ t('ui.sidebar.description') }}</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="group peer hidden text-sidebar-foreground md:block"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+    data-slot="sidebar"
+  >
+    <div data-slot="sidebar-gap" :class="gapClass" />
+    <div data-slot="sidebar-container" :class="containerClass">
+      <div
+        data-sidebar="sidebar"
+        data-slot="sidebar-inner"
+        class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/sidebar/SidebarContent.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</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/sidebar/SidebarFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</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/sidebar/SidebarGroup.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</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/sidebar/SidebarGroupAction.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(defineProps<PrimitiveProps & ClassProps>(), { as: 'button' })
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :type="props.as === 'button' ? 'button' : undefined"
+    data-slot="sidebar-group-action"
+    data-sidebar="group-action"
+    :class="cn(
+      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring',
+      'transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      // Nới vùng bấm trên mobile — 20px là dưới ngưỡng chạm dễ trượt.
+      'after:absolute after:-inset-2 md:after:hidden',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/sidebar/SidebarGroupContent.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</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/sidebar/SidebarGroupLabel.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(defineProps<PrimitiveProps & ClassProps>(), { as: 'div' })
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    data-slot="sidebar-group-label"
+    data-sidebar="group-label"
+    :class="cn(
+      'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring',
+      'transition-[margin,opacity] duration-(--duration-base) ease-linear focus-visible:ring-2 [&>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/sidebar/SidebarHeader.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</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/sidebar/SidebarInput.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+import Input from '../input/Input.vue'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <Input
+    data-slot="sidebar-input"
+    data-sidebar="input"
+    :class="cn('h-8 w-full bg-background shadow-none', props.class)"
+  />
+</template>

package/src/components/sidebar/SidebarInset.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <!-- `peer-data-[variant=inset]`: lề và bo góc chỉ bật khi sidebar bên cạnh
+       chạy biến thể `inset`, nên nội dung không phải biết mình đang ở đâu. -->
+  <main
+    data-slot="sidebar-inset"
+    :class="cn(
+      'relative flex w-full 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-xl md:peer-data-[variant=inset]:shadow-sm',
+      'md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+      props.class,
+    )"
+  >
+    <slot />
+  </main>
+</template>

package/src/components/sidebar/SidebarMenu.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</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/sidebar/SidebarMenuAction.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<PrimitiveProps & ClassProps & {
+    /** Chỉ hiện khi rê chuột vào mục — trên mobile thì luôn hiện. */
+    showOnHover?: boolean
+  }>(),
+  { as: 'button', showOnHover: false },
+)
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :type="props.as === 'button' ? 'button' : undefined"
+    data-slot="sidebar-menu-action"
+    data-sidebar="menu-action"
+    :class="cn(
+      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring',
+      'transition-transform peer-hover/menu-button:text-sidebar-accent-foreground',
+      'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>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=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.showOnHover && [
+        'md:opacity-0 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100',
+        'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100',
+      ],
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/sidebar/SidebarMenuBadge.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</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-sidebar-foreground',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-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-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>