export const ATTR_FOCUSABLE = "data-kbd-focusable";

export const ATTR_GRID_ROW = "data-kbd-grid-row";

export const ATTR_GROUP = "data-kbd-group";

export const SEL_FOCUSABLE = `[${ATTR_FOCUSABLE}]`;

export const SEL_GRID_ROW = `[${ATTR_GRID_ROW}]`;

export const SEL_GROUP = `[${ATTR_GROUP}]`;

export const DATA_GROUP_TYPE = "kbdGroup";

export const GROUP_TYPE_GRID = "grid";

export const GROUP_TYPE_HORIZONTAL = "horizontal";

export const GROUP_TYPE_VERTICAL = "vertical";

import {

  DATA_GROUP_TYPE,

  GROUP_TYPE_GRID,

  GROUP_TYPE_HORIZONTAL,

  GROUP_TYPE_VERTICAL,

  SEL_FOCUSABLE,

  SEL_GRID_ROW,

  SEL_GROUP,

} from "./constants.ts";

import {

  findAll,

  findAllFocusable,

  moveFocus(direction: GridDirection): boolean;

}

const SEL_FOCUSABLE = "[data-kbd-focusable]";

const SEL_GRID_ROW = "[data-kbd-grid-row]";

const SEL_GROUP = "[data-kbd-group]";

const DATA_GROUP_TYPE = "kbdGroup";

const GROUP_TYPE_GRID = "grid";

const GROUP_TYPE_HORIZONTAL = "horizontal";

const GROUP_TYPE_VERTICAL = "vertical";

interface GridCurrent {

  cell: HTMLElement;

  row: HTMLElement;

import { createContext } from "preact";

import { SingletonKeyboardNav } from "./mod.ts";

import { useContext, useEffect } from "preact/hooks";

import {

  ATTR_FOCUSABLE,

  ATTR_GRID_ROW,

  ATTR_GROUP,

  GROUP_TYPE_GRID,

} from "./constants.ts";

import { GROUP_TYPE_VERTICAL } from "./constants.ts";

import { GROUP_TYPE_HORIZONTAL } from "./constants.ts";

const keyboardNavContext = createContext(

  new SingletonKeyboardNav(

};

export const keyboardProps = {

  focusable: { "data-kbd-focusable": "" },

  grid: { "data-kbd-group": "grid" },

  gridRow: { "data-kbd-grid-row": "" },

  vertical: { "data-kbd-group": "vertical" },

  horizontal: { "data-kbd-group": "horizontal" },

  focusable: { [ATTR_FOCUSABLE]: "" },

  grid: { [ATTR_GROUP]: GROUP_TYPE_GRID },

  gridRow: { [ATTR_GRID_ROW]: "" },

  horizontal: { [ATTR_GROUP]: GROUP_TYPE_HORIZONTAL },

  vertical: { [ATTR_GROUP]: GROUP_TYPE_VERTICAL },

};