shadcnui-hono-jsx 0.1.0

package/generated/templates/base-sera/rtl/combobox.tsx

@@ -0,0 +1,1126 @@
+// Generated by shadcnui-hono-jsx. DO NOT EDIT; run `bun run generate combobox`.
+// upstream: shadcn/ui base-sera/combobox (https://ui.shadcn.com/r/styles/base-sera/combobox.json)
+// upstream-revision: sha256:27eac56b72f08e32b0fff850a44fb89081869f6f5627d66280fee7f73893b6bc; shadcn-ui/ui@98a1fe67b439324ddc857f47fbdce056600a4329
+// mode: adapter
+// variant: rtl
+// client: <script type="module" src="/shadcn/combobox.js"> (public/shadcn/)
+// Derived from shadcn/ui. Copyright (c) 2023 shadcn.
+// Original additions and modifications: Copyright (c) 2026 supermomonga.
+// SPDX-License-Identifier: MIT
+// Full license: LICENSE-shadcnui-hono-jsx.txt at the project root.
+// Icons: lucide@1.48.0 (check, chevron-down, x). Copyright (c) 2026 Lucide Icons and Contributors. ISC License (see LICENSE-shadcnui-hono-jsx.txt).
+
+import { cn } from "cn"
+import type { Child, JSX, JSXNode } from "hono/jsx"
+import {
+  cloneElement,
+  createContext,
+  isValidElement,
+  useContext,
+  useId,
+} from "hono/jsx"
+
+import { Button } from "./button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "./input-group"
+
+/** Props of the intrinsic element `T`, following Hono JSX conventions (`class`, no `render`/`asChild`). */
+type ComponentProps<
+  T extends keyof JSX.IntrinsicElements | "svg",
+  Render = never,
+> = (T extends keyof JSX.IntrinsicElements
+  ? JSX.IntrinsicElements[T]
+  : JSX.HTMLAttributes) & {
+  class?: string | undefined
+  className?: never
+  render?: Render
+  asChild?: never
+}
+
+/** An element (or a function returning one) that replaces the default element, as in Base UI. */
+type RenderProp = Child | ((props: Record<string, unknown>) => Child)
+
+/**
+ * Renders `render` in place of `element`, merging props like Base UI's
+ * mergeProps: the render element's props win, classes are combined (the render
+ * element's first) and styles are merged. `type` only applies to button and
+ * input targets.
+ */
+function renderElement<Element>(
+  element: Element,
+  render: RenderProp | undefined
+): Element {
+  if (render === undefined) return element
+  const own: Record<string, unknown> = {
+    ...(element as unknown as JSXNode).props,
+  }
+  if (typeof render === "function") return render(own) as Element
+  if (!isValidElement(render)) {
+    throw new Error("render must be a JSX element or a function returning one")
+  }
+  const target = render as JSXNode
+  const merged: Record<string, unknown> = { ...own }
+  for (const [key, value] of Object.entries(target.props)) {
+    if (key === "class" || key === "className") {
+      merged.class = [value, own.class].filter(Boolean).join(" ")
+    } else if (key === "style" && isObject(value) && isObject(own.style)) {
+      merged.style = { ...own.style, ...value }
+    } else {
+      merged[key] = value
+    }
+  }
+  if (
+    typeof target.tag === "string" &&
+    !["button", "input"].includes(target.tag)
+  ) {
+    if (!("type" in target.props)) delete merged.type
+  }
+  const { children, ...props } = merged
+  return cloneElement(
+    target,
+    props,
+    ...(children === undefined ? [] : [children as Child].flat())
+  ) as Element
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null
+}
+
+/** Renders list content for each item (`ComboboxList`, `ComboboxCollection`). */
+type ComboboxItemRenderer = {
+  bivarianceHack(item: unknown, index: number): Child
+}["bivarianceHack"]
+
+/** Renders the selected value(s) (`ComboboxValue`). */
+type ComboboxValueRenderer = {
+  bivarianceHack(value: unknown): Child
+}["bivarianceHack"]
+
+/** Converts an item to a string (`itemToStringLabel`, `itemToStringValue`). */
+type ComboboxItemToString = {
+  bivarianceHack(item: unknown): string
+}["bivarianceHack"]
+
+type ComboboxRootProps = {
+  id?: string | undefined
+  /** The items passed to `ComboboxList` render functions: values, or groups with `items`. */
+  items?: readonly unknown[] | undefined
+  value?: unknown
+  defaultValue?: unknown
+  /** Select several values, shown as chips. */
+  multiple?: boolean | undefined
+  name?: string | undefined
+  form?: string | undefined
+  disabled?: boolean | undefined
+  required?: boolean | undefined
+  /** Highlight the first match while typing. */
+  autoHighlight?: boolean | undefined
+  itemToStringLabel?: ComboboxItemToString | undefined
+  itemToStringValue?: ComboboxItemToString | undefined
+  children?: Child
+}
+
+interface ComboboxState {
+  id: string
+  anchor: string
+  items: readonly unknown[]
+  /** Whether `items` were given: only then the script filters them. */
+  filtering: boolean
+  selected: readonly unknown[]
+  multiple: boolean
+  disabled: boolean
+  label: (item: unknown) => string
+  value: (item: unknown) => string
+  /** Items claim their index in render order (option ids). */
+  rendered: number
+}
+
+const ComboboxContext = createContext<ComboboxState | null>(null)
+
+function useComboboxContext(): ComboboxState {
+  const context = useContext(ComboboxContext)
+  if (!context)
+    throw new Error("Combobox parts must be rendered inside <Combobox>")
+  return context
+}
+
+/** Whether the item rendered inside is selected (for its indicator). */
+const ComboboxItemContext = createContext(false)
+
+/** The items of the enclosing group, for `ComboboxCollection`. */
+const ComboboxGroupContext = createContext<{
+  labelId: string
+  items: readonly unknown[] | undefined
+} | null>(null)
+
+/** The anchor passed to `ComboboxContent` (chips), instead of the input. */
+const ComboboxAnchorContext = createContext<string | null>(null)
+
+/** Base UI's label of an item: `itemToStringLabel`, an object's `label` or `value`, or the string. */
+function comboboxLabel(item: unknown, convert?: ComboboxItemToString): string {
+  if (convert && item != null) return convert(item) ?? ""
+  if (item && typeof item === "object") {
+    if ("label" in item && item.label != null) return String(item.label)
+    if ("value" in item) return String(item.value)
+  }
+  return comboboxString(item)
+}
+
+/** Base UI's form value of an item: `itemToStringValue`, a `{ label, value }` object's value, or the string. */
+function comboboxValue(item: unknown, convert?: ComboboxItemToString): string {
+  if (convert && item != null) return convert(item) ?? ""
+  if (item && typeof item === "object" && "value" in item && "label" in item) {
+    return comboboxString(item.value)
+  }
+  return comboboxString(item)
+}
+
+function comboboxString(value: unknown): string {
+  if (value == null) return ""
+  return typeof value === "string" ? value : JSON.stringify(value)
+}
+
+/** Groups (`{ items }`) are flattened to their items. */
+function comboboxLeaves(items: readonly unknown[]): unknown[] {
+  return items.flatMap((item) =>
+    item &&
+    typeof item === "object" &&
+    "items" in item &&
+    Array.isArray(item.items)
+      ? item.items
+      : [item]
+  )
+}
+
+const COMBOBOX_HIDDEN_INPUT =
+  "clip-path:inset(50%);overflow:hidden;white-space:nowrap;border:0;padding:0;width:1px;height:1px;margin:-1px;position:absolute"
+
+/**
+ * Holds the combobox state for its parts and renders the form value; the
+ * client script `/shadcn/combobox.js` finds the parts by `data-combobox`.
+ */
+function ComboboxRootElement({
+  id,
+  items,
+  value,
+  defaultValue,
+  multiple = false,
+  name,
+  form,
+  disabled = false,
+  required,
+  autoHighlight = false,
+  itemToStringLabel,
+  itemToStringValue,
+  children,
+}: ComboboxRootProps) {
+  const generated = useId().replaceAll(":", "-")
+  const comboboxId = id ?? `combobox${generated}`
+  const initial = value === undefined ? defaultValue : value
+  const selected: readonly unknown[] = multiple
+    ? Array.isArray(initial)
+      ? initial
+      : []
+    : initial == null
+      ? []
+      : [initial]
+  const state: ComboboxState = {
+    id: comboboxId,
+    anchor: `--${comboboxId}`,
+    items: items ?? [],
+    filtering: items !== undefined,
+    selected,
+    multiple,
+    disabled,
+    label: (item) => comboboxLabel(item, itemToStringLabel),
+    value: (item) => comboboxValue(item, itemToStringValue),
+    rendered: 0,
+  }
+  const values = selected.map(state.value)
+  return (
+    <ComboboxContext.Provider value={state}>
+      {children}
+      {/* biome-ignore lint/a11y/noAriaHiddenOnFocusable: Base UI's form input, out of the tab order and hidden from assistive technology */}
+      <input
+        tabindex={-1}
+        aria-hidden="true"
+        name={multiple ? undefined : name}
+        form={form}
+        value={multiple ? "" : (values[0] ?? "")}
+        required={required}
+        disabled={disabled || undefined}
+        data-combobox-field={comboboxId}
+        data-name={multiple ? name : undefined}
+        data-values={multiple ? JSON.stringify(values) : undefined}
+        data-multiple={multiple ? "" : undefined}
+        data-auto-highlight={autoHighlight ? "" : undefined}
+        data-filter={items ? "" : undefined}
+        style={COMBOBOX_HIDDEN_INPUT}
+      />
+      {multiple && name
+        ? values.map((item) => (
+            <input
+              type="hidden"
+              name={name}
+              form={form}
+              value={item}
+              data-combobox-field={comboboxId}
+            />
+          ))
+        : null}
+    </ComboboxContext.Provider>
+  )
+}
+
+type ComboboxValueProps = {
+  children?: Child | ComboboxValueRenderer
+  placeholder?: Child
+}
+
+/**
+ * The selected value: a render function's result (chips, with a template the
+ * script copies for new chips) or the selected label.
+ */
+function ComboboxValueElement({ children, placeholder }: ComboboxValueProps) {
+  const state = useComboboxContext()
+  if (typeof children === "function") {
+    const [sample] = comboboxLeaves(state.items)
+    return (
+      <span
+        data-combobox-value={state.id}
+        data-initial={
+          state.multiple
+            ? JSON.stringify(state.selected.map(state.value))
+            : undefined
+        }
+        style="display:contents"
+      >
+        {children(
+          state.multiple ? state.selected : (state.selected[0] ?? null)
+        )}
+        {state.multiple && sample !== undefined ? (
+          <template data-label={state.label(sample)}>
+            {children([sample])}
+          </template>
+        ) : null}
+      </span>
+    )
+  }
+  const label = state.selected.map(state.label).join(", ")
+  return (
+    <span
+      data-combobox-value={state.id}
+      data-placeholder={
+        typeof placeholder === "string" ? placeholder : undefined
+      }
+      style="display:contents"
+    >
+      {children ?? (label || placeholder)}
+    </span>
+  )
+}
+
+function ComboboxTriggerElement({
+  type = "button",
+  render,
+  ...props
+}: ComponentProps<"button", RenderProp>) {
+  const state = useComboboxContext()
+  return renderElement(
+    <button
+      type={type}
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      disabled={state.disabled || undefined}
+      data-combobox={state.id}
+      data-combobox-trigger=""
+      data-placeholder={state.selected.length === 0 ? "" : undefined}
+      {...props}
+    />,
+    render
+  )
+}
+
+/** Shown only while there is a value; the script keeps it in a template otherwise. */
+function ComboboxClearElement({
+  type = "button",
+  render,
+  ...props
+}: ComponentProps<"button", RenderProp>) {
+  const state = useComboboxContext()
+  const button = renderElement(
+    <button
+      type={type}
+      tabindex={-1}
+      aria-label="Clear selection"
+      disabled={state.disabled || undefined}
+      data-combobox={state.id}
+      data-combobox-clear=""
+      {...props}
+    />,
+    render
+  )
+  return state.selected.length > 0 ? (
+    button
+  ) : (
+    <template data-combobox-clear={state.id}>{button}</template>
+  )
+}
+
+function ComboboxInputElement({
+  render,
+  style,
+  ...props
+}: ComponentProps<"input", RenderProp>) {
+  const state = useComboboxContext()
+  return renderElement(
+    <input
+      id={`${state.id}-input`}
+      autocomplete="off"
+      spellcheck={false}
+      autocorrect="off"
+      autocapitalize="none"
+      role="combobox"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-autocomplete="list"
+      value={state.multiple ? "" : state.selected.map(state.label).join("")}
+      disabled={state.disabled || undefined}
+      data-combobox={state.id}
+      data-combobox-input=""
+      style={withStyle(style, { "anchor-name": state.anchor })}
+      {...props}
+    />,
+    render
+  )
+}
+
+function ComboboxPortalElement({ children }: { children?: Child }) {
+  return <>{children}</>
+}
+
+/** A CSS anchor shared by `ComboboxChips` (`ref`) and `ComboboxContent` (`anchor`). */
+interface ComboboxAnchor {
+  readonly name: string
+}
+
+function createComboboxAnchor(): ComboboxAnchor {
+  return { name: `--combobox-anchor${useId().replaceAll(":", "-")}` }
+}
+
+type ComboboxPositionerProps = AnchorPositionerProps & {
+  anchor?: ComboboxAnchor | null | undefined
+}
+
+function ComboboxPositionerElement({
+  anchor,
+  ...props
+}: ComboboxPositionerProps) {
+  return (
+    <ComboboxAnchorContext.Provider value={anchor?.name ?? null}>
+      <AnchorPositioner {...props} />
+    </ComboboxAnchorContext.Provider>
+  )
+}
+
+function ComboboxPopupElement({ style, ...props }: ComponentProps<"div">) {
+  const state = useComboboxContext()
+  const placement = useContext(AnchorPlacementContext)
+  const anchor = useContext(ComboboxAnchorContext) ?? state.anchor
+  return (
+    <div
+      id={`${state.id}-popup`}
+      popover="manual"
+      role="presentation"
+      data-side={placement.side}
+      data-align={placement.align}
+      data-combobox={state.id}
+      data-combobox-popup=""
+      style={withStyle(style, anchorPlacementStyle(anchor, placement))}
+      {...props}
+    />
+  )
+}
+
+type ComboboxListProps = ComponentProps<"div"> & {
+  children?: Child | ComboboxItemRenderer
+}
+
+function ComboboxListElement({ children, ...props }: ComboboxListProps) {
+  const state = useComboboxContext()
+  return (
+    <div
+      id={`${state.id}-list`}
+      role="listbox"
+      tabindex={-1}
+      aria-multiselectable={state.multiple ? "true" : undefined}
+      {...props}
+    >
+      {typeof children === "function"
+        ? state.items.map((item, index) => children(item, index))
+        : children}
+    </div>
+  )
+}
+
+type ComboboxItemProps = ComponentProps<"div", RenderProp> & {
+  value?: unknown
+  disabled?: boolean | undefined
+}
+
+function ComboboxItemElement({
+  value,
+  disabled,
+  render,
+  ...props
+}: ComboboxItemProps) {
+  const state = useComboboxContext()
+  const index = state.rendered++
+  const itemValue = state.value(value)
+  const selected = state.selected.some(
+    (item) => state.value(item) === itemValue
+  )
+  return (
+    <ComboboxItemContext.Provider value={selected}>
+      {renderElement(
+        <div
+          id={`${state.id}-option-${index}`}
+          role="option"
+          aria-selected={selected ? "true" : "false"}
+          aria-disabled={disabled ? "true" : undefined}
+          data-selected={selected ? "" : undefined}
+          data-disabled={disabled ? "" : undefined}
+          data-value={itemValue}
+          data-label={state.label(value)}
+          {...props}
+        />,
+        render
+      )}
+    </ComboboxItemContext.Provider>
+  )
+}
+
+/** Rendered hidden unless its item is selected; the script toggles it. */
+function ComboboxItemIndicatorElement({
+  render,
+  ...props
+}: ComponentProps<"span", RenderProp>) {
+  const selected = useContext(ComboboxItemContext)
+  return renderElement(
+    <span
+      aria-hidden="true"
+      hidden={!selected}
+      data-selected={selected ? "" : undefined}
+      data-combobox-indicator=""
+      {...props}
+    />,
+    render
+  )
+}
+
+type ComboboxGroupProps = ComponentProps<"div"> & {
+  /** The group's items, for `ComboboxCollection`. */
+  items?: readonly unknown[] | undefined
+}
+
+function ComboboxGroupElement({ items, ...props }: ComboboxGroupProps) {
+  const labelId = `${useComboboxContext().id}-group${useId().replaceAll(":", "-")}`
+  return (
+    <ComboboxGroupContext.Provider value={{ labelId, items }}>
+      <div role="group" aria-labelledby={labelId} {...props} />
+    </ComboboxGroupContext.Provider>
+  )
+}
+
+function ComboboxGroupLabelElement(props: ComponentProps<"div">) {
+  return <div id={useContext(ComboboxGroupContext)?.labelId} {...props} />
+}
+
+function ComboboxCollectionElement({
+  children,
+}: {
+  children?: Child | ComboboxItemRenderer
+}) {
+  const state = useComboboxContext()
+  const items = useContext(ComboboxGroupContext)?.items ?? state.items
+  return (
+    <>
+      {typeof children === "function"
+        ? items.map((item, index) => children(item, index))
+        : children}
+    </>
+  )
+}
+
+/** Its content shows while no item matches; the script copies it from the template. */
+function ComboboxEmptyElement({ children, ...props }: ComponentProps<"div">) {
+  const state = useComboboxContext()
+  const empty = state.filtering && state.items.length === 0
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      data-combobox-empty=""
+      {...props}
+    >
+      <template>{children}</template>
+      {empty ? children : null}
+    </div>
+  )
+}
+
+function ComboboxSeparatorElement(props: ComponentProps<"div">) {
+  return <div role="separator" aria-orientation="horizontal" {...props} />
+}
+
+type ComboboxChipsProps = ComponentProps<"div"> & {
+  /** From `useComboboxAnchor()`: places `ComboboxContent` under the chips. */
+  ref?: ComboboxAnchor | null | undefined
+}
+
+function ComboboxChipsElement({ ref, style, ...props }: ComboboxChipsProps) {
+  const state = useComboboxContext()
+  return (
+    <div
+      role="toolbar"
+      data-combobox={state.id}
+      data-combobox-chips=""
+      style={ref ? withStyle(style, { "anchor-name": ref.name }) : style}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChipElement(props: ComponentProps<"div">) {
+  return <div tabindex={-1} data-combobox-chip="" {...props} />
+}
+
+function ComboboxChipRemoveElement({
+  type = "button",
+  render,
+  ...props
+}: ComponentProps<"button", RenderProp>) {
+  return renderElement(
+    <button
+      type={type}
+      tabindex={-1}
+      aria-label="Remove"
+      data-combobox-chip-remove=""
+      {...props}
+    />,
+    render
+  )
+}
+
+type AnchorSide =
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "inline-start"
+  | "inline-end"
+
+type AnchorAlign = "start" | "center" | "end"
+
+interface AnchorPlacement {
+  side: AnchorSide
+  align: AnchorAlign
+  sideOffset: number
+  alignOffset: number
+}
+
+type AnchorPositionerProps = {
+  side?: AnchorSide | undefined
+  align?: AnchorAlign | undefined
+  sideOffset?: number | undefined
+  alignOffset?: number | undefined
+  class?: string | undefined
+  children?: Child
+}
+
+const AnchorPlacementContext = createContext<AnchorPlacement>({
+  side: "bottom",
+  align: "center",
+  sideOffset: 0,
+  alignOffset: 0,
+})
+
+/** Placement for the popup inside; the popup itself is positioned with CSS. */
+function AnchorPositioner({
+  side = "bottom",
+  align = "center",
+  sideOffset = 0,
+  alignOffset = 0,
+  children,
+}: AnchorPositionerProps) {
+  return (
+    <AnchorPlacementContext.Provider
+      value={{ side, align, sideOffset, alignOffset }}
+    >
+      {children}
+    </AnchorPlacementContext.Provider>
+  )
+}
+
+/** Inline styles that anchor a popup to `anchor` like Base UI's positioner. */
+function anchorPlacementStyle(
+  anchor: string,
+  p: AnchorPlacement
+): Record<string, string> {
+  const block = p.side === "top" || p.side === "bottom"
+  const logical = p.side === "inline-start" || p.side === "inline-end"
+  const span = block
+    ? { start: "span-x-end", center: "", end: "span-x-start" }[p.align]
+    : logical
+      ? { start: "span-block-end", center: "", end: "span-block-start" }[
+          p.align
+        ]
+      : { start: "span-y-end", center: "", end: "span-y-start" }[p.align]
+  const toward = {
+    top: "margin-bottom",
+    bottom: "margin-top",
+    left: "margin-right",
+    right: "margin-left",
+    "inline-start": "margin-inline-end",
+    "inline-end": "margin-inline-start",
+  }[p.side]
+  const across = block
+    ? p.align === "end"
+      ? "margin-inline-end"
+      : "margin-inline-start"
+    : p.align === "end"
+      ? "margin-block-end"
+      : "margin-block-start"
+  const edge = { start: "0%", center: "50%", end: "100%" }[p.align]
+  const origin = {
+    top: `${edge} 100%`,
+    bottom: `${edge} 0%`,
+    left: `100% ${edge}`,
+    right: `0% ${edge}`,
+    "inline-start": `100% ${edge}`,
+    "inline-end": `0% ${edge}`,
+  }[p.side]
+  return {
+    "position-anchor": anchor,
+    "position-area": [p.side, span].filter(Boolean).join(" "),
+    "position-try-fallbacks": block ? "flip-block" : "flip-inline",
+    [toward]: `${p.sideOffset}px`,
+    // A centered popup is centered with its margins, so a start margin of
+    // twice the offset shifts it by the offset: toward the end of the line
+    // (mirrored in right-to-left text, like Base UI) or down.
+    ...(p.alignOffset === 0
+      ? {}
+      : p.align === "center"
+        ? {
+            [block ? "margin-inline-start" : "margin-block-start"]:
+              `${2 * p.alignOffset}px`,
+          }
+        : { [across]: `${p.alignOffset}px` }),
+    "--transform-origin": origin,
+    // Base UI's size variables for popup classes (`w-(--anchor-width)`, ...).
+    "--anchor-width": "anchor-size(width)",
+    "--anchor-height": "anchor-size(height)",
+    "--available-width": "100%",
+    "--available-height": "100%",
+  }
+}
+
+/** Adds `extra` declarations to a string or object `style` prop (the prop wins). */
+function withStyle(
+  style: string | JSX.CSSProperties | undefined,
+  extra: Record<string, string>
+): string | JSX.CSSProperties {
+  if (typeof style === "string") {
+    const css = Object.entries(extra).map(([key, value]) => `${key}:${value}`)
+    return [...css, style].join(";")
+  }
+  return { ...extra, ...style }
+}
+
+const Combobox = ComboboxRootElement
+
+function ComboboxValue({ ...props }: ComboboxValueProps) {
+  return <ComboboxValueElement data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  class: className,
+  children,
+  ...props
+}: ComponentProps<"button", RenderProp>) {
+  return (
+    <ComboboxTriggerElement
+      data-slot="combobox-trigger"
+      class={cn("[&_svg:not([class*='size-'])]:size-3.5", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon class="pointer-events-none size-3.5 text-muted-foreground" />
+    </ComboboxTriggerElement>
+  )
+}
+
+function ComboboxClear({
+  class: className,
+  ...props
+}: ComponentProps<"button", RenderProp>) {
+  return (
+    <ComboboxClearElement
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      class={cn(className)}
+      {...props}
+    >
+      <XIcon class="pointer-events-none" />
+    </ComboboxClearElement>
+  )
+}
+
+function ComboboxInput({
+  class: className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComponentProps<"input", RenderProp> & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup class={cn("w-auto", className)}>
+      <ComboboxInputElement
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            render={<ComboboxTrigger />}
+            data-slot="input-group-button"
+            class="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  class: className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComponentProps<"div"> &
+  Pick<
+    ComboboxPositionerProps,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPortalElement>
+      <ComboboxPositionerElement
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        class="isolate z-50"
+      >
+        <ComboboxPopupElement
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          class={cn(
+            "m-auto supports-[position-area:bottom]:m-0",
+            "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-transparent *:data-[slot=input-group]:bg-transparent *:data-[slot=input-group]:px-2.5 *:data-[slot=input-group]:focus-within:border-transparent open:animate-in open:fade-in-0 open:zoom-in-95 not-open:animate-out not-open:fade-out-0 not-open:zoom-out-95 not-open:hidden transition-[display,overlay] transition-discrete",
+            className
+          )}
+          {...props}
+        />
+      </ComboboxPositionerElement>
+    </ComboboxPortalElement>
+  )
+}
+
+function ComboboxList({ class: className, ...props }: ComboboxListProps) {
+  return (
+    <ComboboxListElement
+      data-slot="combobox-list"
+      class={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  class: className,
+  children,
+  ...props
+}: ComboboxItemProps) {
+  return (
+    <ComboboxItemElement
+      data-slot="combobox-item"
+      class={cn(
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pe-8 ps-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxItemIndicatorElement
+        render={
+          <span class="pointer-events-none absolute end-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon class="pointer-events-none" />
+      </ComboboxItemIndicatorElement>
+    </ComboboxItemElement>
+  )
+}
+
+function ComboboxGroup({ class: className, ...props }: ComboboxGroupProps) {
+  return (
+    <ComboboxGroupElement
+      data-slot="combobox-group"
+      class={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({ class: className, ...props }: ComponentProps<"div">) {
+  return (
+    <ComboboxGroupLabelElement
+      data-slot="combobox-label"
+      class={cn(
+        "px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({
+  ...props
+}: {
+  children?: Child | ComboboxItemRenderer
+}) {
+  return (
+    <ComboboxCollectionElement data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ class: className, ...props }: ComponentProps<"div">) {
+  return (
+    <ComboboxEmptyElement
+      data-slot="combobox-empty"
+      class={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  class: className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <ComboboxSeparatorElement
+      data-slot="combobox-separator"
+      class={cn("-mx-1.5 my-1.5 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({ class: className, ...props }: ComboboxChipsProps) {
+  return (
+    <ComboboxChipsElement
+      data-slot="combobox-chips"
+      class={cn(
+        "flex min-h-10 flex-wrap items-center gap-1.5 rounded-none border border-transparent border-b-input bg-transparent bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color] focus-within:border-b-ring has-aria-invalid:border-b-destructive has-data-[slot=combobox-chip]:px-0 dark:has-aria-invalid:border-b-destructive/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  class: className,
+  children,
+  showRemove = true,
+  ...props
+}: ComponentProps<"div"> & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxChipElement
+      data-slot="combobox-chip"
+      class={cn(
+        "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxChipRemoveElement
+          render={<Button variant="ghost" size="icon-xs" />}
+          class="-ms-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon class="pointer-events-none" />
+        </ComboboxChipRemoveElement>
+      )}
+    </ComboboxChipElement>
+  )
+}
+
+function ComboboxChipsInput({
+  class: className,
+  ...props
+}: ComponentProps<"input", RenderProp>) {
+  return (
+    <ComboboxInputElement
+      data-slot="combobox-chip-input"
+      class={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return createComboboxAnchor()
+}
+// icon-helper
+/** Like lucide-react, icons are hidden from assistive technology unless labelled. */
+function hasA11yProp(props: object): boolean {
+  return Object.keys(props).some(
+    (key) => key.startsWith("aria-") || key === "role" || key === "title"
+  )
+}
+
+// icon: {"lucide":"CheckIcon","tabler":"IconCheck","hugeicons":"Tick02Icon","phosphor":"CheckIcon","remixicon":"RiCheckLine"}
+/** Lucide `check` icon, inlined (ISC License, see LICENSE-shadcnui-hono-jsx.txt). */
+function CheckIcon({
+  class: className,
+  children,
+  ...props
+}: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={cn("lucide lucide-check", className)}
+      aria-hidden={children || hasA11yProp(props) ? undefined : "true"}
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
+      {children}
+    </svg>
+  )
+}
+
+// icon: {"lucide":"ChevronDownIcon","tabler":"IconChevronDown","hugeicons":"ArrowDown01Icon","phosphor":"CaretDownIcon","remixicon":"RiArrowDownSLine"}
+/** Lucide `chevron-down` icon, inlined (ISC License, see LICENSE-shadcnui-hono-jsx.txt). */
+function ChevronDownIcon({
+  class: className,
+  children,
+  ...props
+}: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={cn("lucide lucide-chevron-down", className)}
+      aria-hidden={children || hasA11yProp(props) ? undefined : "true"}
+      {...props}
+    >
+      <path d="m6 9 6 6 6-6" />
+      {children}
+    </svg>
+  )
+}
+
+// icon: {"lucide":"XIcon","tabler":"IconX","hugeicons":"Cancel01Icon","phosphor":"XIcon","remixicon":"RiCloseLine"}
+/** Lucide `x` icon, inlined (ISC License, see LICENSE-shadcnui-hono-jsx.txt). */
+function XIcon({
+  class: className,
+  children,
+  ...props
+}: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={cn("lucide lucide-x", className)}
+      aria-hidden={children || hasA11yProp(props) ? undefined : "true"}
+      {...props}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+      {children}
+    </svg>
+  )
+}
+
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}