shadcnui-hono-jsx 0.1.0

package/generated/templates/base-maia/drawer.tsx

@@ -0,0 +1,427 @@
+// Generated by shadcnui-hono-jsx. DO NOT EDIT; run `bun run generate drawer`.
+// upstream: shadcn/ui base-maia/drawer (https://ui.shadcn.com/r/styles/base-maia/drawer.json)
+// upstream-revision: sha256:9c004e45d3a561c1ba360d612824a67e4d56d319ff4d035cb7caa86ee034626a; shadcn-ui/ui@98a1fe67b439324ddc857f47fbdce056600a4329
+// mode: generated
+// client: <script type="module" src="/shadcn/drawer.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.
+
+import { cn } from "cn"
+import type { Child, JSX, JSXNode } from "hono/jsx"
+import {
+  cloneElement,
+  createContext,
+  isValidElement,
+  useContext,
+  useId,
+} from "hono/jsx"
+
+/** Props of the intrinsic element `T`, following Hono JSX conventions (`class`, no `render`/`asChild`). */
+type ComponentProps<
+  T extends keyof JSX.IntrinsicElements,
+  Render = never,
+> = JSX.IntrinsicElements[T] & {
+  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 DrawerSwipeDirection = "up" | "down" | "left" | "right"
+
+type DrawerRootProps = {
+  id?: string | undefined
+  /** Base UI's `modal`; the drawer always opens as a modal dialog. */
+  modal?: boolean | "trap-focus" | undefined
+  /** The direction a swipe closes the drawer in, and the edge it slides from. */
+  swipeDirection?: DrawerSwipeDirection | undefined
+  /** Base UI's snap points; not supported (the drawer opens fully). */
+  snapPoints?: readonly (number | string)[] | undefined
+  children?: Child
+}
+
+interface DrawerContextValue {
+  id: string
+  titleId: string
+  descriptionId: string
+  swipeDirection: DrawerSwipeDirection
+}
+
+const DrawerRootContext = createContext<DrawerContextValue | null>(null)
+
+function useDrawerRootContext(): DrawerContextValue {
+  const context = useContext(DrawerRootContext)
+  if (!context) throw new Error("Drawer parts must be rendered inside <Drawer>")
+  return context
+}
+
+/**
+ * Connects the trigger, the native \`<dialog>\`, its title and description.
+ * Opening and closing use Invoker Commands; the client script
+ * \`/shadcn/drawer.js\` adds swiping to close.
+ */
+function DrawerRootElement({
+  id,
+  swipeDirection = "down",
+  children,
+}: DrawerRootProps) {
+  const generated = useId()
+  const dialogId = id ?? `drawer${generated.replaceAll(":", "-")}`
+  return (
+    <DrawerRootContext.Provider
+      value={{
+        id: dialogId,
+        titleId: `${dialogId}-title`,
+        descriptionId: `${dialogId}-description`,
+        swipeDirection,
+      }}
+    >
+      {children}
+    </DrawerRootContext.Provider>
+  )
+}
+
+function DrawerTriggerElement({
+  type = "button",
+  render,
+  ...props
+}: ComponentProps<"button", RenderProp>) {
+  const { id } = useDrawerRootContext()
+  return renderElement(
+    <button
+      type={type}
+      command="show-modal"
+      commandfor={id}
+      aria-haspopup="dialog"
+      {...props}
+    />,
+    render
+  )
+}
+
+/** The native dialog renders in the top layer, so no portal or viewport is needed. */
+function DrawerPortalElement({ children }: { children?: Child }) {
+  return <>{children}</>
+}
+
+/** Base UI's swipe state, reset by the script after a swipe. */
+const DRAWER_SWIPE_STYLE: Record<string, string> = {
+  "--drawer-swipe-movement-x": "0px",
+  "--drawer-swipe-movement-y": "0px",
+  "--drawer-swipe-progress": "0",
+  "--nested-drawers": "0",
+  "--drawer-snap-point-offset": "0px",
+  "--drawer-swipe-strength": "1",
+}
+
+function DrawerPopupElement({ style, ...props }: ComponentProps<"dialog">) {
+  const { id, titleId, descriptionId, swipeDirection } = useDrawerRootContext()
+  return (
+    <dialog
+      id={id}
+      closedby="any"
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      data-swipe-direction={swipeDirection}
+      data-drawer=""
+      style={withDrawerStyle(style, DRAWER_SWIPE_STYLE)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitleElement(props: ComponentProps<"h2">) {
+  return <h2 id={useContext(DrawerRootContext)?.titleId} {...props} />
+}
+
+function DrawerDescriptionElement(props: ComponentProps<"p">) {
+  return <p id={useContext(DrawerRootContext)?.descriptionId} {...props} />
+}
+
+function DrawerCloseElement({
+  type = "button",
+  render,
+  ...props
+}: ComponentProps<"button", RenderProp>) {
+  const { id } = useDrawerRootContext()
+  return renderElement(
+    <button type={type} command="close" commandfor={id} {...props} />,
+    render
+  )
+}
+
+function DrawerContentElement(props: ComponentProps<"div">) {
+  return <div data-drawer-content="" {...props} />
+}
+
+/** Adds `extra` declarations to a string or object `style` prop (the prop wins). */
+function withDrawerStyle(
+  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 }
+}
+
+type DrawerContextProps = {
+  hasSnapPoints: boolean
+  modal: DrawerRootProps["modal"]
+  showSwipeHandle: boolean
+  swipeDirection: NonNullable<DrawerRootProps["swipeDirection"]>
+}
+
+const DrawerContext = createContext<DrawerContextProps | null>(null)
+
+function useDrawer() {
+  const context = useContext(DrawerContext)
+
+  if (!context) {
+    throw new Error("useDrawer must be used within a Drawer.")
+  }
+
+  return context
+}
+
+function Drawer({
+  modal = true,
+  showSwipeHandle = false,
+  snapPoints,
+  swipeDirection = "down",
+  ...props
+}: DrawerRootProps & {
+  showSwipeHandle?: boolean
+}) {
+  const hasSnapPoints = snapPoints != null && snapPoints.length > 0
+  const contextValue = (() => ({
+    hasSnapPoints,
+    modal,
+    showSwipeHandle,
+    swipeDirection,
+  }))()
+
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      <DrawerRootElement
+        data-slot="drawer"
+        modal={modal}
+        snapPoints={snapPoints}
+        swipeDirection={swipeDirection}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  )
+}
+
+function DrawerTrigger({ ...props }: ComponentProps<"button", RenderProp>) {
+  return <DrawerTriggerElement data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({ ...props }: { children?: Child }) {
+  return <DrawerPortalElement data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({ ...props }: ComponentProps<"button", RenderProp>) {
+  return <DrawerCloseElement data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay(_props: ComponentProps<"div">) {
+  return null
+}
+
+function DrawerSwipeHandle({
+  class: className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-swipe-handle"
+      aria-hidden="true"
+      class={cn(
+        "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-[100px] group-data-[swipe-axis=x]/drawer-popup:after:w-1.5 group-data-[swipe-axis=y]/drawer-popup:after:h-1.5 group-data-[swipe-axis=y]/drawer-popup:after:w-[100px] active:cursor-grabbing",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  class: className,
+  children,
+  ...props
+}: ComponentProps<"dialog">) {
+  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
+  const swipeAxis =
+    swipeDirection === "down" || swipeDirection === "up" ? "y" : "x"
+
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      {modal === true && (
+        <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />
+      )}
+      <DrawerPopupElement
+        data-slot="drawer-popup"
+        data-swipe-axis={swipeAxis}
+        data-snap-points={hasSnapPoints ? "" : undefined}
+        class={cn(
+          // Base.
+          "inset-auto h-auto max-h-none w-auto max-w-none overflow-visible",
+          "backdrop:min-h-dvh backdrop:bg-black/80 backdrop:opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] backdrop:transition-opacity backdrop:duration-450 backdrop:ease-[cubic-bezier(0.32,0.72,0,1)] backdrop:select-none not-open:backdrop:pointer-events-none not-open:backdrop:opacity-0 not-open:backdrop:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:backdrop:[--drawer-overlay-min-opacity:0.5] starting:backdrop:opacity-0 data-swiping:backdrop:duration-0 supports-backdrop-filter:backdrop:backdrop-blur-xs",
+          "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col rounded-4xl border border-popover bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter,display,overlay] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [--drawer-bleed-background:transparent] [--drawer-inset:--spacing(2)] [interpolate-size:allow-keywords] dark:border-border not-open:hidden transition-discrete",
+          // Nested.
+          "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+          // Bleed.
+          "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
+          // Sizing.
+          "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+          // Stack.
+          "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
+          // Transitions.
+          "not-open:transform-(--closed-transform) not-open:opacity-[0.9999] not-open:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 not-open:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] starting:transform-(--closed-transform) data-swiping:duration-0 not-open:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+          // Axis: y.
+          "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
+          // Axis: x.
+          "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+          // Direction: down.
+          "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+          // Direction: up.
+          "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+          // Direction: left.
+          "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+          // Direction: right.
+          "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
+          className
+        )}
+        {...props}
+      >
+        {showSwipeHandle && <DrawerSwipeHandle />}
+        <DrawerContentElement
+          data-slot="drawer-content"
+          class={cn(
+            "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
+          )}
+        >
+          {children}
+        </DrawerContentElement>
+      </DrawerPopupElement>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ class: className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      class={cn(
+        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-1.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ class: className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      class={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({ class: className, ...props }: ComponentProps<"h2">) {
+  return (
+    <DrawerTitleElement
+      data-slot="drawer-title"
+      class={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  class: className,
+  ...props
+}: ComponentProps<"p">) {
+  return (
+    <DrawerDescriptionElement
+      data-slot="drawer-description"
+      class={cn("text-sm text-balance text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerSwipeHandle,
+  DrawerTitle,
+  DrawerTrigger,
+}