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

package/src/ui/combobox.tsx

@@ -0,0 +1,650 @@
+import * as React from "react"
+import { View, Input as TaroInput, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+import { Check, ChevronDown, X } from "@open-dy/lucide-taro"
+
+type ComboboxOption = string
+type ComboboxAnchorRef = React.RefObject<unknown> | React.MutableRefObject<unknown>
+type ComboboxValueInput = string | string[]
+
+function normalizeComboboxValue(value?: ComboboxValueInput) {
+  if (value === undefined) return []
+  return Array.isArray(value) ? value : [value]
+}
+
+const ComboboxContext = React.createContext<{
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  value: string[]
+  onValueChange: (value: string[]) => void
+  search: string
+  onSearchChange: (search: string) => void
+  multiple?: boolean
+  items?: readonly ComboboxOption[]
+  filteredItems: readonly ComboboxOption[]
+}>({
+  open: false,
+  onOpenChange: () => {},
+  value: [],
+  onValueChange: () => {},
+  search: "",
+  onSearchChange: () => {},
+  filteredItems: [],
+})
+
+/**
+ * @desc 可搜索选择框组件。
+ * @param {Parameters<typeof Combobox>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Combobox>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { useState } from 'react'
+ * import { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * export function CityPicker() {
+ *   const [value, setValue] = useState<string[]>([])
+ *   return <Combobox items={['北京', '上海']} value={value} onValueChange={setValue}>
+ *     <ComboboxInput placeholder="搜索城市" showClear />
+ *     <ComboboxContent><ComboboxList>{(item) => <ComboboxItem value={item}>{item}</ComboboxItem>}</ComboboxList></ComboboxContent>
+ *   </Combobox>
+ * }
+ * ```
+ */
+function Combobox({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  multiple,
+  autoHighlight,
+  items,
+  children,
+  ...props
+}: ViewProps & {
+  /** @desc 受控展开状态；传入后以该值为准，需在 onOpenChange 中更新。省略时由组件内部管理。 */
+  open?: boolean
+  /** @desc 非受控模式的初始展开状态，默认 false；仅初始化时读取，传入 open 后不生效。 */
+  defaultOpen?: boolean
+  /** @desc 触发器或关闭操作请求改变展开状态时调用，参数为下一状态；受控模式需由调用方同步 open。 */
+  onOpenChange?: (open: boolean) => void
+  /** @desc 受控选中值；接受字符串或字符串数组，内部统一为数组。省略时使用内部状态，传入后需同步 onValueChange。 */
+  value?: ComboboxValueInput
+  /** @desc 非受控模式的初始选中值，默认空数组；字符串会转为单元素数组，传入 value 后不生效。 */
+  defaultValue?: ComboboxValueInput
+  /** @desc 选中、取消或清空时调用，始终返回字符串数组；单选也返回数组，清空返回 []。 */
+  onValueChange?: (value: string[]) => void
+  /** @desc 是否允许多选，默认 false；单选选择后清空搜索并关闭列表，多选切换各项且保留列表。 */
+  multiple?: boolean
+  /** @desc 兼容属性；当前实现不执行自动高亮，传入 true 也不会选中首项。 */
+  autoHighlight?: boolean
+  /** @desc 可选的字符串候选列表，用于按搜索词进行不区分大小写的包含过滤；由 ComboboxList 的渲染函数生成过滤后的项目，不会自动生成 UI。 */
+  items?: readonly ComboboxOption[]
+}) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)
+  const [internalValue, setInternalValue] = React.useState<string[]>(
+    normalizeComboboxValue(defaultValue)
+  )
+  const [search, setSearch] = React.useState("")
+  const openControlled = openProp !== undefined
+  const valueControlled = valueProp !== undefined
+  const open = openControlled ? openProp : internalOpen
+  const value = valueControlled ? normalizeComboboxValue(valueProp) : internalValue
+  const filteredItems = React.useMemo(() => {
+    if (!items) return []
+
+    const keyword = search.trim().toLowerCase()
+    if (!keyword) return items
+
+    return items.filter((item) => item.toLowerCase().includes(keyword))
+  }, [items, search])
+  void autoHighlight
+
+  return (
+    <ComboboxContext.Provider
+      value={{
+        open,
+        onOpenChange: (v) => {
+          if (!openControlled) setInternalOpen(v)
+          onOpenChange?.(v)
+        },
+        value,
+        onValueChange: (v) => {
+          if (!valueControlled) setInternalValue(v)
+          onValueChange?.(v)
+        },
+        search,
+        onSearchChange: setSearch,
+        multiple,
+        items,
+        filteredItems,
+      }}
+    >
+      <View data-slot="combobox" {...props}>
+        {children}
+      </View>
+    </ComboboxContext.Provider>
+  )
+}
+
+type ComboboxValueProps = Omit<ViewProps, "children"> & {
+  /** @desc 选中值的自定义节点或渲染函数；函数收到 string[]，省略时将选中值用逗号连接显示。 */
+  children?: React.ReactNode | ((values: string[]) => React.ReactNode)
+}
+
+/**
+ * @desc 可搜索选择框当前值展示。
+ * @param {Parameters<typeof ComboboxValue>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxValue>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxValue } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxValue /></Combobox>
+ * ```
+ */
+function ComboboxValue({ className, children, ...props }: ComboboxValueProps) {
+  const { value } = React.useContext(ComboboxContext)
+
+  if (typeof children === "function") {
+    return <>{children(value)}</>
+  }
+
+  return (
+    <View data-slot="combobox-value" className={className} {...props}>
+      {children ?? value.join(", ")}
+    </View>
+  )
+}
+
+/**
+ * @desc 可搜索选择框触发器。
+ * @param {Parameters<typeof ComboboxTrigger>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxTrigger>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxTrigger } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxTrigger /></Combobox>
+ * ```
+ */
+function ComboboxTrigger({ className, children, ...props }: ViewProps) {
+  const { onOpenChange, open } = React.useContext(ComboboxContext)
+  return (
+    <View
+      data-slot="combobox-trigger"
+      aria-expanded={open}
+      className={cn("flex items-center justify-center", className)}
+      onClick={() => onOpenChange(!open)}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="pointer-events-none" size={16} />
+    </View>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ViewProps) {
+  const { onValueChange, onSearchChange } = React.useContext(ComboboxContext)
+  return (
+    <View
+      data-slot="combobox-clear"
+      className={cn("flex items-center justify-center", className)}
+      onClick={() => {
+        onValueChange([])
+        onSearchChange("")
+      }}
+      {...props}
+    >
+      <X className="pointer-events-none" size={16} />
+    </View>
+  )
+}
+
+/**
+ * @desc 可搜索选择框输入区域。
+ * @param {Parameters<typeof ComboboxInput>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxInput>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxInput } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxInput /></Combobox>
+ * ```
+ */
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  placeholder,
+  "aria-invalid": ariaInvalid,
+  ...props
+}: Omit<ViewProps, "children"> & {
+  /** @desc 输入框末尾的附加内容；省略时仅显示输入区及配置的触发/清空按钮。 */
+  children?: React.ReactNode
+  /** @desc 是否禁用搜索输入及内部按钮交互，默认 false。 */
+  disabled?: boolean
+  /** @desc 是否显示展开按钮，默认 true；有可清空值且 showClear 为 true 时优先显示清空按钮。 */
+  showTrigger?: boolean
+  /** @desc 是否在有搜索词或选中值时显示清空按钮，默认 false；点击同时清空搜索词和选中值。 */
+  showClear?: boolean
+  /** @desc 空输入时的提示文本；省略时不设置原生输入提示。 */
+  placeholder?: string
+  /** @desc 是否显示校验失败样式；true 或 "true" 表示失败，不负责执行校验。 */
+  "aria-invalid"?: boolean | "true" | "false"
+}) {
+  const { search, value, multiple, onSearchChange, onOpenChange } = React.useContext(ComboboxContext)
+  const inputValue = !multiple && !search ? (value[0] ?? "") : search
+  const hasClearableValue = search.length > 0 || value.length > 0
+
+  return (
+    <View
+      data-slot="combobox-input"
+      aria-invalid={ariaInvalid}
+      className={cn(
+        "flex h-8 w-auto items-center rounded-lg border border-input bg-transparent px-2.5 text-sm transition-colors outline-none focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        disabled && "pointer-events-none cursor-not-allowed bg-input/50 opacity-50 dark:bg-input/80",
+        className
+      )}
+      {...props}
+    >
+      <TaroInput
+        className="flex-1 bg-transparent text-sm outline-none"
+        value={inputValue}
+        placeholder={placeholder}
+        disabled={disabled}
+        onInput={(e) => {
+          onSearchChange(e.detail.value)
+          onOpenChange(true)
+        }}
+        onFocus={() => onOpenChange(true)}
+      />
+      {showClear && hasClearableValue
+        ? <ComboboxClear />
+        : showTrigger && <ComboboxTrigger />}
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 可搜索选择框内容容器。
+ * @param {Parameters<typeof ComboboxContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxContent } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxContent /></Combobox>
+ * ```
+ */
+function ComboboxContent({
+  className,
+  children,
+  anchor,
+  ...props
+}: ViewProps & {
+  /** @desc 兼容的锚点引用；当前实现未使用它测量定位，内容在原位置相对布局，不会自动跟随该 ref。 */
+  anchor?: ComboboxAnchorRef }) {
+  const { open, onOpenChange } = React.useContext(ComboboxContext)
+  void anchor
+  if (!open) return null
+
+  return (
+    <>
+      <View className="fixed inset-0 z-40" onClick={() => onOpenChange(false)} />
+      <View
+        data-slot="combobox-content"
+        className={cn(
+          "group/combobox-content relative z-50 max-h-96 overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    </>
+  )
+}
+
+type ComboboxListProps = Omit<ViewProps, "children"> & {
+  /** @desc 静态列表节点或逐项渲染函数；函数收到过滤后的候选字符串，需要根 Combobox 提供 items，未提供时不生成列表项。 */
+  children?: React.ReactNode | ((item: ComboboxOption) => React.ReactNode)
+}
+
+/**
+ * @desc 可搜索选择框列表容器。
+ * @param {Parameters<typeof ComboboxList>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxList>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxList } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxList /></Combobox>
+ * ```
+ */
+function ComboboxList({
+  className,
+  children,
+  ...props
+}: ComboboxListProps) {
+  const { items, filteredItems } = React.useContext(ComboboxContext)
+  const content =
+    typeof children === "function"
+      ? items
+        ? filteredItems.map((item) => (
+            <React.Fragment key={item}>{children(item)}</React.Fragment>
+          ))
+        : null
+      : children
+
+  return (
+    <View
+      data-slot="combobox-list"
+      className={cn("max-h-72 overflow-y-auto overscroll-contain p-1", className)}
+      {...props}
+    >
+      {content}
+    </View>
+  )
+}
+
+/**
+ * @desc 可搜索选择框条目。
+ * @param {Parameters<typeof ComboboxItem>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxItem>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxItem } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxItem value="one" /></Combobox>
+ * ```
+ */
+function ComboboxItem({
+  className,
+  children,
+  value: itemValue,
+  ...props
+}: ViewProps & {
+  /** @desc 该候选项的字符串值；用于比较和更新选择，需与 items 或业务候选值一致。 */
+  value: string }) {
+  const { value, onValueChange, onSearchChange, multiple, onOpenChange } = React.useContext(ComboboxContext)
+  const isSelected = value.includes(itemValue)
+
+  return (
+    <View
+      data-slot="combobox-item"
+      data-selected={isSelected || undefined}
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none active:bg-accent active:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        isSelected && "bg-accent text-accent-foreground",
+        className
+      )}
+      onClick={() => {
+        if (multiple) {
+          const next = isSelected
+            ? value.filter((v) => v !== itemValue)
+            : [...value, itemValue]
+          onValueChange(next)
+        } else {
+          onValueChange([itemValue])
+          onSearchChange("")
+          onOpenChange(false)
+        }
+      }}
+      {...props}
+    >
+      {children}
+      <View className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        {isSelected ? <Check className="pointer-events-none" /> : null}
+      </View>
+    </View>
+  )
+}
+
+/**
+ * @desc 可搜索选择框分组容器。
+ * @param {Parameters<typeof ComboboxGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxGroup } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxGroup /></Combobox>
+ * ```
+ */
+function ComboboxGroup({ className, ...props }: ViewProps) {
+  return <View data-slot="combobox-group" className={cn(className)} {...props} />
+}
+
+/**
+ * @desc 可搜索选择框标签文本。
+ * @param {Parameters<typeof ComboboxLabel>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxLabel>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxLabel } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxLabel /></Combobox>
+ * ```
+ */
+function ComboboxLabel({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 选择项集合的布局容器；直接渲染传入的子节点，不执行列表迭代。
+ * @param {Parameters<typeof ComboboxCollection>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxCollection>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxCollection } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxCollection /></Combobox>
+ * ```
+ */
+function ComboboxCollection({ ...props }: ViewProps) {
+  return <View data-slot="combobox-collection" {...props} />
+}
+
+/**
+ * @desc 可搜索选择框无结果内容。
+ * @param {Parameters<typeof ComboboxEmpty>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxEmpty>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxEmpty } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxEmpty /></Combobox>
+ * ```
+ */
+function ComboboxEmpty({ className, ...props }: ViewProps) {
+  const { items, filteredItems } = React.useContext(ComboboxContext)
+  if (items && filteredItems.length > 0) return null
+
+  return (
+    <View
+      data-slot="combobox-empty"
+      className={cn(
+        "flex w-full justify-center py-2 text-center text-sm text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 可搜索选择框分隔线。
+ * @param {Parameters<typeof ComboboxSeparator>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxSeparator>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxSeparator } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxSeparator /></Combobox>
+ * ```
+ */
+function ComboboxSeparator({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 可搜索选择框已选标签容器。
+ * @param {React.ComponentProps<typeof ComboboxChips>} props 容器属性与锚点 ref。
+ * @return {React.ReactNode} 已选标签的布局容器。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxChips } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxChips /></Combobox>
+ * ```
+ */
+const ComboboxChips = React.forwardRef<unknown, ViewProps>(function ComboboxChips(
+  { className, ...props },
+  ref
+) {
+  const { onOpenChange } = React.useContext(ComboboxContext)
+
+  return (
+    <View
+      ref={ref}
+      data-slot="combobox-chips"
+      className={cn(
+        "relative z-50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30",
+        className
+      )}
+      onClick={() => onOpenChange(true)}
+      {...props}
+    />
+  )
+})
+
+/**
+ * @desc 可搜索选择框已选标签。
+ * @param {Parameters<typeof ComboboxChip>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxChip>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxChip } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxChip /></Combobox>
+ * ```
+ */
+function ComboboxChip({
+  className,
+  children,
+  value: chipValue,
+  showRemove = true,
+  ...props
+}: ViewProps & {
+  /** @desc 点击移除时匹配的选中值；省略时从字符串/数字 children 推导，无法推导时移除按钮不会改变选择。 */
+  value?: string
+  /** @desc 是否显示移除按钮，默认 true；点击只移除当前值并阻止冒泡，不关闭列表。 */
+  showRemove?: boolean
+}) {
+  const { value, onValueChange } = React.useContext(ComboboxContext)
+  const resolvedChipValue =
+    chipValue ??
+    (typeof children === "string" || typeof children === "number"
+      ? String(children)
+      : undefined)
+
+  return (
+    <View
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-5 w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove ? <View
+          data-slot="combobox-chip-remove"
+          className="-ml-1 flex size-4 shrink-0 items-center justify-center opacity-50"
+          onClick={(e) => {
+            e.stopPropagation?.()
+            if (resolvedChipValue) {
+              onValueChange(value.filter((v) => v !== resolvedChipValue))
+            }
+          }}
+        >
+          <X className="pointer-events-none" size={16} />
+        </View> : null}
+    </View>
+  )
+}
+
+/**
+ * @desc 可搜索选择框标签输入框。
+ * @param {Parameters<typeof ComboboxChipsInput>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ComboboxChipsInput>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxChipsInput } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * <Combobox><ComboboxChipsInput /></Combobox>
+ * ```
+ */
+function ComboboxChipsInput({
+  className,
+  placeholder,
+  disabled,
+  ...props
+}: ViewProps & {
+  /** @desc 空搜索词时的输入提示；省略时不设置提示文本。 */
+  placeholder?: string;
+  /** @desc 是否禁用原生搜索输入；默认可输入，禁用状态由 Taro Input 处理。 */
+  disabled?: boolean }) {
+  const { search, onSearchChange, onOpenChange } = React.useContext(ComboboxContext)
+  return (
+    <TaroInput
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      value={search}
+      placeholder={placeholder}
+      disabled={disabled}
+      onInput={(e) => {
+        onSearchChange(e.detail.value)
+        onOpenChange(true)
+      }}
+      onFocus={() => onOpenChange(true)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 创建组合选择框的锚点 ref，用于关联定位容器。
+ * @param 无参数
+ * @return {ReturnType<typeof useComboboxAnchor>} 当前上下文或锚点引用。
+ * @example
+ * ```tsx
+ * import { useComboboxAnchor, ComboboxChips } from '@open-dy/vibecoding-sdk-taro/ui/combobox'
+ * function Anchor() { const ref = useComboboxAnchor(); return <ComboboxChips ref={ref} /> }
+ * ```
+ */
+function useComboboxAnchor() {
+  return React.useRef<unknown>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}