useFocusManagement

"use client";

import { useFocusManagement } from "@zentauri-ui/zentauri-components/lib/useFocusManagement";
import { Button } from "@zentauri-ui/zentauri-components/ui/buttons";
import { HookDemoPanel } from "@/components/preview/hooks/hook-demo-panel";
import { useRef, useState } from "react";

export default function HookDemo() {
  const [open, setOpen] = useState(false);
  const contentRef = useRef<HTMLDivElement>(null);
  useFocusManagement({ open, setOpen, contentRef });

  return (
    <HookDemoPanel title="Interactive demo">
      <p className="mb-4 text-sm text-slate-400">
        Opens a focus-managed region with Escape to close. Tab should stay inside
        while open.
      </p>
      <Button type="button" onClick={() => setOpen(true)}>
        Open dialog
      </Button>
      {open ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4" role="presentation">
          <div
            ref={contentRef}
            role="dialog"
            aria-modal="true"
            aria-label="Focus trap demo"
            tabIndex={-1}
            className="max-w-md rounded-2xl border border-white/10 bg-slate-900 p-6 shadow-2xl outline-none"
          >
            <p className="mb-4 text-sm text-slate-300">
              Try Tab through these controls, then Escape.
            </p>
            <div className="flex flex-col gap-3">
              <Button type="button">First action</Button>
              <Button type="button" appearance="outline">
                Second action
              </Button>
              <Button type="button" appearance="outline" onClick={() => setOpen(false)}>
                Close
              </Button>
            </div>
          </div>
        </div>
      ) : null}
    </HookDemoPanel>
  );
}