shadcnui-hono-jsx 0.1.0

package/generated/templates/base-lyra/menu-inverted-translucent/select.tsx

@@ -0,0 +1,567 @@
+// Generated by shadcnui-hono-jsx. DO NOT EDIT; run `bun run generate select`.
+// upstream: shadcn/ui base-lyra/select (https://ui.shadcn.com/r/styles/base-lyra/select.json)
+// upstream-revision: sha256:1db07fc67bc996d8da71eab913ceb972ef3eea0c5863fdc0d364282d6e2189ac; shadcn-ui/ui@98a1fe67b439324ddc857f47fbdce056600a4329
+// mode: generated
+// variant: menu-inverted-translucent
+// 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). 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,
+} from "hono/jsx"
+
+/** 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
+}
+
+type SelectRootProps = {
+  name?: string | undefined
+  /** Value of the item that is selected on load. */
+  defaultValue?: string | undefined
+  value?: string | undefined
+  disabled?: boolean | undefined
+  required?: boolean | undefined
+  form?: string | undefined
+  children?: Child
+}
+
+type SelectSide =
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "inline-start"
+  | "inline-end"
+type SelectAlign = "start" | "center" | "end"
+
+type SelectPositionerProps = {
+  side?: SelectSide | undefined
+  align?: SelectAlign | undefined
+  sideOffset?: number | undefined
+  alignOffset?: number | undefined
+  alignItemWithTrigger?: boolean | undefined
+  class?: string | undefined
+  children?: Child
+}
+
+type SelectValueProps = ComponentProps<"span"> & { placeholder?: Child }
+
+type SelectItemProps = ComponentProps<"option"> & { value: string }
+
+interface SelectContextValue {
+  name: string | undefined
+  value: string | undefined
+  disabled: boolean
+  required: boolean
+  form: string | undefined
+  content: Child
+  side: SelectSide
+  style: Record<string, string>
+}
+
+const SelectContext = createContext<SelectContextValue | null>(null)
+
+function useSelectContext(): SelectContextValue {
+  const context = useContext(SelectContext)
+  if (!context) throw new Error("Select parts must be rendered inside <Select>")
+  return context
+}
+
+/** Upstream defaults of SelectContent's placement props. */
+const SELECT_CONTENT_DEFAULTS = {
+  side: "bottom",
+  align: "center",
+  sideOffset: 4,
+  alignOffset: 0,
+}
+
+/** Upstream's popup classes, applied to the browser's picker. */
+const SELECT_PICKER_CLASSES =
+  "[appearance:base-select] [&::picker-icon]:hidden [&::picker(select)]:[appearance:base-select] [&::picker(select)]:border-0 [&::picker(select)]:p-0 [&::picker(select)]:[margin:var(--select-picker-margin)] [&::picker(select)]:[position-area:var(--select-picker-area)] [&::picker(select)]:[position-try-fallbacks:flip-block] [&::picker(select)]:transition-[display,overlay] [&::picker(select)]:transition-discrete [&::picker(select)]:dark [&::picker(select)]:max-h-(--available-height) [&::picker(select)]:w-(--anchor-width) [&::picker(select)]:min-w-36 [&::picker(select)]:origin-(--transform-origin) [&::picker(select)]:overflow-x-hidden [&::picker(select)]:overflow-y-auto [&::picker(select)]:rounded-none [&::picker(select)]:text-popover-foreground [&::picker(select)]:shadow-md [&::picker(select)]:ring-1 [&::picker(select)]:ring-foreground/10 [&::picker(select)]:duration-100 data-[side=bottom]:[&::picker(select)]:slide-in-from-top-2 data-[side=inline-end]:[&::picker(select)]:slide-in-from-left-2 data-[side=inline-start]:[&::picker(select)]:slide-in-from-right-2 data-[side=left]:[&::picker(select)]:slide-in-from-right-2 data-[side=right]:[&::picker(select)]:slide-in-from-left-2 data-[side=top]:[&::picker(select)]:slide-in-from-bottom-2 open:[&::picker(select)]:animate-in open:[&::picker(select)]:fade-in-0 open:[&::picker(select)]:zoom-in-95 not-open:[&::picker(select)]:animate-out not-open:[&::picker(select)]:fade-out-0 not-open:[&::picker(select)]:zoom-out-95 [&::picker(select)]:animate-none! [&::picker(select)]:bg-popover/70 [&::picker(select)]:backdrop-blur-2xl [&::picker(select)]:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!"
+
+/** First element with the given component or tag in a children tree. */
+function findSelectElement(node: unknown, tag: unknown): JSXNode | undefined {
+  for (const child of [node].flat(Number.POSITIVE_INFINITY)) {
+    if (!isValidElement(child)) continue
+    const element = child as JSXNode
+    if (element.tag === tag) return element
+    const found = findSelectElement(element.props.children, tag)
+    if (found) return found
+  }
+  return undefined
+}
+
+/** CSS variables for the picker: placement like Base UI's positioner, and its size variables. */
+function selectPickerStyle(p: {
+  side: SelectSide
+  align: SelectAlign
+  sideOffset: number
+  alignOffset: number
+}): 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 offset = `${p.sideOffset}px`
+  const cross = `${p.alignOffset}px`
+  const margin = {
+    top: `0 0 ${offset} ${cross}`,
+    bottom: `${offset} 0 0 ${cross}`,
+    left: `${cross} ${offset} 0 0`,
+    right: `${cross} 0 0 ${offset}`,
+    "inline-start": `${cross} ${offset} 0 0`,
+    "inline-end": `${cross} 0 0 ${offset}`,
+  }[p.side]
+  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 {
+    "--select-picker-area": [p.side, span].filter(Boolean).join(" "),
+    "--select-picker-margin": margin,
+    "--transform-origin": origin,
+    "--anchor-width": "anchor-size(width)",
+    "--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 }
+}
+
+/**
+ * Holds the selection and hands <SelectContent> to the trigger, which renders
+ * it inside the native <select>.
+ */
+function SelectRootElement({
+  name,
+  defaultValue,
+  value,
+  disabled = false,
+  required = false,
+  form,
+  children,
+}: SelectRootProps) {
+  const nodes = ([children] as unknown[]).flat(
+    Number.POSITIVE_INFINITY
+  ) as unknown[]
+  const content = nodes.find(
+    (node) => isValidElement(node) && (node as JSXNode).tag === SelectContent
+  ) as JSXNode | undefined
+  if (!content) throw new Error("<SelectContent> must be a child of <Select>")
+  const placement = { ...SELECT_CONTENT_DEFAULTS }
+  for (const [key, prop] of Object.entries(content.props)) {
+    if (key in placement && prop !== undefined)
+      Object.assign(placement, { [key]: prop })
+  }
+  return (
+    <SelectContext.Provider
+      value={{
+        name,
+        value: value ?? defaultValue,
+        disabled,
+        required,
+        form,
+        content,
+        side: placement.side as SelectSide,
+        style: selectPickerStyle(
+          placement as Parameters<typeof selectPickerStyle>[0]
+        ),
+      }}
+    >
+      {nodes.filter((node) => node !== content) as Child[]}
+    </SelectContext.Provider>
+  )
+}
+
+/** The `<selectedcontent>` element (not yet in Hono's JSX types) mirrors the selected option. */
+const SelectedContent = "selectedcontent" as "span"
+
+/** The native select: its button shows the value, then a placeholder option and the items. */
+function SelectTriggerElement({
+  class: className,
+  style,
+  children,
+  ...props
+}: ComponentProps<"div">) {
+  const select = useSelectContext()
+  const placeholder = findSelectElement(children, SelectValue)?.props
+    .placeholder
+  return (
+    <select
+      name={select.name}
+      disabled={select.disabled || undefined}
+      required={select.required || undefined}
+      form={select.form}
+      data-side={select.side}
+      style={withStyle(style, select.style)}
+      class={cn(SELECT_PICKER_CLASSES, className)}
+      {...props}
+    >
+      <button type="button" class="contents">
+        {children}
+      </button>
+      <option
+        value=""
+        disabled
+        hidden
+        selected={select.value === undefined || undefined}
+        data-placeholder=""
+      >
+        {placeholder as Child}
+      </option>
+      {select.content}
+    </select>
+  )
+}
+
+function SelectValueElement({
+  placeholder: _placeholder,
+  children: _children,
+  ...props
+}: SelectValueProps) {
+  return <SelectedContent {...props} />
+}
+
+/** Portal, positioner, popup and list: the picker is the browser's, styled by the select. */
+function SelectPassthrough({
+  children,
+}: {
+  children?: Child
+  [prop: string]: unknown
+}) {
+  return <>{children}</>
+}
+
+function SelectItemElement({ value, ...props }: SelectItemProps) {
+  const select = useContext(SelectContext)
+  return (
+    <option
+      value={value}
+      selected={select?.value === value || undefined}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Upstream's indicator, shown only inside the selected option and not in the
+ * select's value (Base UI does not render it otherwise, so upstream's
+ * `*:[span]:last:flex` on the item must not win).
+ */
+function SelectItemIndicatorElement({
+  render,
+  ...props
+}: ComponentProps<"span", RenderProp>) {
+  return renderElement(
+    <span
+      class="in-[option:not(:checked)]:hidden! in-[selectedcontent]:hidden!"
+      {...props}
+    />,
+    render
+  )
+}
+
+const Select = SelectRootElement
+
+function SelectGroup({
+  class: className,
+  ...props
+}: ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="select-group"
+      class={cn("scroll-my-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ class: className, ...props }: SelectValueProps) {
+  return (
+    <SelectValueElement
+      data-slot="select-value"
+      class={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  class: className,
+  size = "default",
+  children,
+  ...props
+}: ComponentProps<"div"> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectTriggerElement
+      data-slot="select-trigger"
+      data-size={size}
+      class={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-none border border-input bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 has-[option[data-placeholder]:checked]:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none **:data-[slot=select-value]:line-clamp-1 **:data-[slot=select-value]:flex **:data-[slot=select-value]:items-center **:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon class="pointer-events-none size-4 text-muted-foreground" />
+    </SelectTriggerElement>
+  )
+}
+
+function SelectContent({
+  class: className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: ComponentProps<"div"> &
+  Pick<
+    SelectPositionerProps,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPassthrough>
+      <SelectPassthrough
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        class="isolate z-50"
+      >
+        <SelectPassthrough
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          class={cn(
+            "dark isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!",
+            className
+          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPassthrough>{children}</SelectPassthrough>
+          <SelectScrollDownButton />
+        </SelectPassthrough>
+      </SelectPassthrough>
+    </SelectPassthrough>
+  )
+}
+
+function SelectLabel({ class: className, ...props }: ComponentProps<"legend">) {
+  return (
+    <legend
+      data-slot="select-label"
+      class={cn("px-2 py-2 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({ class: className, children, ...props }: SelectItemProps) {
+  return (
+    <SelectItemElement
+      data-slot="select-item"
+      class={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 [&::checkmark]:hidden disabled:text-inherit",
+        className
+      )}
+      {...props}
+    >
+      <span class="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </span>
+      <SelectItemIndicatorElement
+        render={
+          <span class="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon class="pointer-events-none" />
+      </SelectItemIndicatorElement>
+    </SelectItemElement>
+  )
+}
+
+function SelectSeparator({ class: className, ...props }: ComponentProps<"hr">) {
+  return (
+    <hr
+      data-slot="select-separator"
+      class={cn("pointer-events-none -mx-1 h-px bg-border border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton(_props: ComponentProps<"div">) {
+  return null
+}
+
+function SelectScrollDownButton(_props: ComponentProps<"div">) {
+  return null
+}
+// 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":"IconSelector","hugeicons":"UnfoldMoreIcon","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>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}