// axi0 Motion 0.2.0: Cascade menu. A menu button that sweeps colored layers and then a panel in from the side, its numbered links rising one after another.
// Generated from src/cascade-menu/meta.json by motion-pack: a thin wrapper. The loader (motion.js) must be on the page once;
// it starts the effect on the element this renders. Options left out keep the effect's own defaults.
import { createElement } from "react";
import type { HTMLAttributes, ReactNode } from "react";

export interface CascadeMenuProps extends HTMLAttributes<HTMLElement> {
  /** the side the panel slides in from (default "right") */
  side?: "right" | "left";
  /** the layers that sweep in before the panel, comma separated (default "#f6a04d,#ffd6a8") */
  colors?: string;
  /** the button's label while closed (default "Menu") */
  menu?: string;
  /** the button's label while open (default "Close") */
  close?: string;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

const s = (v: unknown) => (v === undefined ? undefined : String(v));

export function CascadeMenu({ as = "div", side, colors, menu, close, ...rest }: CascadeMenuProps) {
  return createElement(as, { ...rest, "data-motion": "cascade-menu", "data-motion-side": s(side), "data-motion-colors": s(colors), "data-motion-menu": s(menu), "data-motion-close": s(close) });
}

export default CascadeMenu;