@open-dy/vibecoding-sdk-taro 0.0.1-beta.5 → 0.0.1-beta.7

package/src/ui/navigation-menu.tsx

@@ -0,0 +1,341 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { ChevronDown } from "@open-dy/lucide-taro"
+
+const NavigationMenuContext = React.createContext<{
+  activeItem: string | null
+  setActiveItem: (item: string | null) => void
+}>({ activeItem: null, setActiveItem: () => {} })
+
+const NavigationMenuItemContext = React.createContext<{
+  value: string
+} | null>(null)
+
+/**
+ * @desc 导航菜单组件。
+ * @param {Parameters<typeof NavigationMenu>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof NavigationMenu>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { NavigationMenu } from '@open-dy/vibecoding-sdk-taro/ui/navigation-menu'
+ * <NavigationMenu />
+ * ```
+ */
+function NavigationMenu({
+  className,
+  children,
+  ...props
+}: ViewProps) {
+  const [activeItem, setActiveItem] = React.useState<string | null>(null)
+
+  return (
+    <NavigationMenuContext.Provider value={{ activeItem, setActiveItem }}>
+      <View
+        data-slot="navigation-menu"
+        className={cn(
+          "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    </NavigationMenuContext.Provider>
+  )
+}
+
+/**
+ * @desc 导航菜单列表容器。
+ * @param {Parameters<typeof NavigationMenuList>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof NavigationMenuList>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuList } from '@open-dy/vibecoding-sdk-taro/ui/navigation-menu'
+ * <NavigationMenu><NavigationMenuList /></NavigationMenu>
+ * ```
+ */
+function NavigationMenuList({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 导航菜单条目。
+ * @param {Parameters<typeof NavigationMenuItem>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof NavigationMenuItem>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuItem } from '@open-dy/vibecoding-sdk-taro/ui/navigation-menu'
+ * <NavigationMenu><NavigationMenuItem /></NavigationMenu>
+ * ```
+ */
+function NavigationMenuItem({
+  className,
+  children,
+  value,
+  ...props
+}: ViewProps & {
+  /** @desc 项目标识；省略时首次渲染生成随机标识。仅在初始化时读取，不应在挂载后更换。 */
+  value?: string }) {
+  const itemValueRef = React.useRef(
+    value ?? `navigation-menu-item-${Math.random().toString(36).slice(2, 10)}`
+  )
+
+  return (
+    <NavigationMenuItemContext.Provider value={{ value: itemValueRef.current }}>
+      <View
+        data-slot="navigation-menu-item"
+        className={cn("relative", className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </NavigationMenuItemContext.Provider>
+  )
+}
+
+/**
+ * @desc 生成导航菜单触发器的样式类名；接受其声明的样式变体。
+ * @param {Parameters<typeof navigationMenuTriggerStyle>[0]} props 样式变体以及附加的 class 或 className。
+ * @return {string} 合并后的样式类名。
+ * @example
+ * ```tsx
+ * import { navigationMenuTriggerStyle } from '@open-dy/vibecoding-sdk-taro/ui/navigation-menu'
+ * navigationMenuTriggerStyle()
+ * ```
+ */
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50"
+)
+
+type NavigationMenuTriggerRenderProps = Omit<ViewProps, "children"> & {
+  /** @desc 组件自动注入的触发器标识；自定义 render 应转发到触发节点，不手动修改。 */
+  "data-slot": "navigation-menu-trigger"
+  /** @desc 组件自动注入的展开状态：open 或 closed；自定义 render 应转发以供状态样式使用。 */
+  "data-state": "open" | "closed"
+}
+
+type NavigationMenuTriggerClickEvent = Parameters<
+  NonNullable<ViewProps["onClick"]>
+>[0]
+
+type NavigationMenuTriggerProps = Omit<ViewProps, "children"> & {
+  /** @desc 默认触发器内的内容；设置 render 时由自定义渲染结果取代。 */
+  children?: React.ReactNode
+  /** @desc 对应菜单项标识；省略时取最近 NavigationMenuItem 的标识。触发器与内容需使用同一标识，否则无法配对展开。 */
+  value?: string
+  /** @desc 自定义触发器元素或渲染函数；省略时使用 View。元素会被克隆并合并点击处理；函数收到状态和事件 props，必须传给实际可点击节点。 */
+  render?:
+    | React.ReactElement
+    | ((props: NavigationMenuTriggerRenderProps) => React.ReactNode)
+}
+
+/**
+ * @desc 导航菜单触发器。
+ * @param {Parameters<typeof NavigationMenuTrigger>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof NavigationMenuTrigger>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuTrigger } from '@open-dy/vibecoding-sdk-taro/ui/navigation-menu'
+ * <NavigationMenu><NavigationMenuTrigger /></NavigationMenu>
+ * ```
+ */
+function NavigationMenuTrigger({
+  className,
+  children,
+  value,
+  render,
+  onClick,
+  ...props
+}: NavigationMenuTriggerProps) {
+  const { activeItem, setActiveItem } = React.useContext(NavigationMenuContext)
+  const item = React.useContext(NavigationMenuItemContext)
+  const resolvedValue = value ?? item?.value ?? null
+  const isOpen = resolvedValue !== null && activeItem === resolvedValue
+  const handleClick = (event: NavigationMenuTriggerClickEvent) => {
+    onClick?.(event)
+    setActiveItem(isOpen ? null : resolvedValue)
+  }
+
+  const triggerProps: NavigationMenuTriggerRenderProps = {
+    "data-slot": "navigation-menu-trigger",
+    "data-state": isOpen ? "open" : "closed",
+    onClick: handleClick,
+    ...props,
+  }
+
+  if (render) {
+    if (typeof render === "function") {
+      return <>{render(triggerProps)}</>
+    }
+
+    if (React.isValidElement(render)) {
+      const element = render as React.ReactElement<{
+        onClick?: ViewProps["onClick"]
+      }>
+
+      return React.cloneElement(element, {
+        ...triggerProps,
+        onClick: (event: NavigationMenuTriggerClickEvent) => {
+          element.props.onClick?.(event)
+          handleClick(event)
+        },
+      })
+    }
+  }
+
+  return (
+    <View
+      {...triggerProps}
+      className={cn(
+        navigationMenuTriggerStyle(),
+        "group",
+        isOpen && "bg-muted/50",
+        className
+      )}
+    >
+      {children}{" "}
+      <ChevronDown
+        className={cn(
+          "relative top-px ml-1 size-3 transition duration-300",
+          isOpen && "rotate-180"
+        )}
+      />
+    </View>
+  )
+}
+
+/**
+ * @desc 导航菜单内容容器。
+ * @param {Parameters<typeof NavigationMenuContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof NavigationMenuContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuContent } from '@open-dy/vibecoding-sdk-taro/ui/navigation-menu'
+ * <NavigationMenu><NavigationMenuContent /></NavigationMenu>
+ * ```
+ */
+function NavigationMenuContent({
+  className,
+  value,
+  children,
+  ...props
+}: ViewProps & {
+  /** @desc 对应菜单项标识；省略时取最近 NavigationMenuItem 的标识。触发器与内容需使用同一标识，否则无法配对展开。 */
+  value?: string }) {
+  const item = React.useContext(NavigationMenuItemContext)
+  const { activeItem } = React.useContext(NavigationMenuContext)
+  const resolvedValue = value ?? item?.value ?? null
+  const isOpen = resolvedValue !== null && activeItem === resolvedValue
+
+  if (!isOpen) return null
+
+  return (
+    <View
+      data-slot="navigation-menu-content"
+      className={cn(
+        "absolute top-full left-0 z-50 w-auto rounded-lg bg-popover p-1 text-popover-foreground shadow ring-1 ring-foreground/10",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 导航菜单定位容器。
+ * @param {Parameters<typeof NavigationMenuPositioner>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof NavigationMenuPositioner>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuPositioner } from '@open-dy/vibecoding-sdk-taro/ui/navigation-menu'
+ * <NavigationMenu><NavigationMenuPositioner /></NavigationMenu>
+ * ```
+ */
+function NavigationMenuPositioner({ children, ...props }: ViewProps) {
+  return (
+    <View data-slot="navigation-menu-positioner" {...props}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 导航菜单链接。
+ * @param {Parameters<typeof NavigationMenuLink>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof NavigationMenuLink>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuLink } from '@open-dy/vibecoding-sdk-taro/ui/navigation-menu'
+ * <NavigationMenu><NavigationMenuLink /></NavigationMenu>
+ * ```
+ */
+function NavigationMenuLink({
+  className,
+  active = false,
+  ...props
+}: ViewProps & {
+  /** @desc 是否高亮当前导航项，默认 false；只控制视觉状态，不自动执行页面跳转。 */
+  active?: boolean }) {
+  return (
+    <View
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        active && "bg-muted/50 hover:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 导航菜单位置或状态指示器。
+ * @param {Parameters<typeof NavigationMenuIndicator>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof NavigationMenuIndicator>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuIndicator } from '@open-dy/vibecoding-sdk-taro/ui/navigation-menu'
+ * <NavigationMenu><NavigationMenuIndicator /></NavigationMenu>
+ * ```
+ */
+function NavigationMenuIndicator({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <View className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </View>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuPositioner,
+}

package/src/ui/pagination.tsx

@@ -0,0 +1,195 @@
+import { View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import { ChevronLeft, ChevronRight, Ellipsis } from "@open-dy/lucide-taro"
+
+/**
+ * @desc 分页组件。
+ * @param {Parameters<typeof Pagination>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Pagination>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Pagination } from '@open-dy/vibecoding-sdk-taro/ui/pagination'
+ * <Pagination />
+ * ```
+ */
+function Pagination({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 分页内容容器。
+ * @param {Parameters<typeof PaginationContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof PaginationContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Pagination, PaginationContent } from '@open-dy/vibecoding-sdk-taro/ui/pagination'
+ * <Pagination><PaginationContent /></Pagination>
+ * ```
+ */
+function PaginationContent({
+  className,
+  ...props
+}: ViewProps) {
+  return (
+    <View
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 分页条目。
+ * @param {Parameters<typeof PaginationItem>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof PaginationItem>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Pagination, PaginationItem } from '@open-dy/vibecoding-sdk-taro/ui/pagination'
+ * <Pagination><PaginationItem /></Pagination>
+ * ```
+ */
+function PaginationItem({ ...props }: ViewProps) {
+  return <View data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  /** @desc 是否为当前页，默认 false；当前页用 outline 按钮，其他页用 ghost。组件不管理页码或自动翻页。 */
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  ViewProps
+
+/**
+ * @desc 分页链接。
+ * @param {Parameters<typeof PaginationLink>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof PaginationLink>[0]["size"]} props.size 页码按钮尺寸，默认 icon（size-8）；其他尺寸同 Button.size，isActive 控制其外观。
+ * @return {ReturnType<typeof PaginationLink>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Pagination, PaginationLink } from '@open-dy/vibecoding-sdk-taro/ui/pagination'
+ * <Pagination><PaginationLink /></Pagination>
+ * ```
+ */
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 分页上一项按钮。
+ * @param {Parameters<typeof PaginationPrevious>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof PaginationPrevious>[0]["size"]} props.size 导航按钮尺寸，默认 default；可按 Button.size 覆写，文字及图标由组件提供。
+ * @return {ReturnType<typeof PaginationPrevious>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Pagination, PaginationPrevious } from '@open-dy/vibecoding-sdk-taro/ui/pagination'
+ * <Pagination><PaginationPrevious /></Pagination>
+ * ```
+ */
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & {
+  /** @desc 上一页按钮文字，默认 "Previous"；窄屏下文字隐藏，只保留图标，翻页需自行绑定事件。 */
+  text?: string }) {
+  return (
+    <PaginationLink
+      size="default"
+      className={cn("pl-1.5!", className)}
+      {...props}
+    >
+      <ChevronLeft data-icon="inline-start" />
+      <View className="hidden sm:block">{text}</View>
+    </PaginationLink>
+  )
+}
+
+/**
+ * @desc 分页下一项按钮。
+ * @param {Parameters<typeof PaginationNext>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof PaginationNext>[0]["size"]} props.size 导航按钮尺寸，默认 default；可按 Button.size 覆写，文字及图标由组件提供。
+ * @return {ReturnType<typeof PaginationNext>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Pagination, PaginationNext } from '@open-dy/vibecoding-sdk-taro/ui/pagination'
+ * <Pagination><PaginationNext /></Pagination>
+ * ```
+ */
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & {
+  /** @desc 下一页按钮文字，默认 "Next"；窄屏下文字隐藏，只保留图标，翻页需自行绑定事件。 */
+  text?: string }) {
+  return (
+    <PaginationLink
+      size="default"
+      className={cn("pr-1.5!", className)}
+      {...props}
+    >
+      <View className="hidden sm:block">{text}</View>
+      <ChevronRight data-icon="inline-end" />
+    </PaginationLink>
+  )
+}
+
+/**
+ * @desc 分页省略标记。
+ * @param {Parameters<typeof PaginationEllipsis>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof PaginationEllipsis>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Pagination, PaginationEllipsis } from '@open-dy/vibecoding-sdk-taro/ui/pagination'
+ * <Pagination><PaginationEllipsis /></Pagination>
+ * ```
+ */
+function PaginationEllipsis({
+  className,
+  ...props
+}: ViewProps) {
+  return (
+    <View
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <Ellipsis />
+    </View>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}