@primer/react/generated/hooks.json

An implementation of GitHub's Primer Design System using React

{
  "schemaVersion": 2,
  "hooks": {
    "useColorSchemeVar": {
      "name": "useColorSchemeVar",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [
        {
          "name": "values",
          "type": "Partial<Record<string, string>>",
          "required": true,
          "description": "A mapping of color scheme names and string. For example: `{ light: 'white', dark: 'black' }`."
        },
        {
          "name": "fallback",
          "type": "string",
          "required": true,
          "description": "A fallback string for when a string isn't defined for the current color scheme."
        }
      ],
      "returns": {
        "type": "string",
        "description": "The string defined for the current color mode or the fallback string."
      }
    },
    "useConfirm": {
      "name": "useConfirm",
      "importPath": "@primer/react",
      "stories": [
        {
          "id": "components-confirmationdialog-features--shorthand-hook"
        },
        {
          "id": "components-confirmationdialog-features--shorthand-hook-from-action-menu"
        }
      ],
      "returns": {
        "type": "(options: ConfirmOptions) => Promise<boolean>",
        "description": "An async function that shows a confirmation dialog and resolves with a boolean indicating whether the confirm button was used."
      },
      "relatedTypes": [
        {
          "name": "ConfirmOptions",
          "properties": [
            {
              "name": "title",
              "type": "React.ReactNode",
              "required": true,
              "description": "The title of the ConfirmationDialog. This is usually a brief question."
            },
            {
              "name": "content",
              "type": "React.ReactNode",
              "required": true,
              "description": "ConfirmationDialog body content."
            },
            {
              "name": "cancelButtonContent",
              "type": "React.ReactNode",
              "defaultValue": "Cancel",
              "description": "The text to use for the cancel button."
            },
            {
              "name": "confirmButtonContent",
              "type": "React.ReactNode",
              "defaultValue": "OK",
              "description": "The text to use for the confirm button."
            },
            {
              "name": "confirmButtonType",
              "type": "\"normal\" | \"primary\" | \"danger\"",
              "defaultValue": "normal",
              "description": "The type of button to use for the confirm button."
            }
          ]
        }
      ]
    },
    "useFeatureFlag": {
      "name": "useFeatureFlag",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [
        {
          "name": "flag",
          "type": "string",
          "required": true,
          "description": "The feature flag ID."
        }
      ],
      "returns": {
        "type": "boolean",
        "description": "Whether the feature flag is enabled."
      }
    },
    "useFormControlForwardedProps": {
      "name": "useFormControlForwardedProps",
      "importPath": "@primer/react",
      "stories": [
        {
          "id": "hooks-useformcontrolforwardedprops--autowired-custom-input"
        }
      ],
      "parameters": [
        {
          "name": "externalProps",
          "type": "P",
          "required": true,
          "description": "The external props passed to this component. If provided, these props will be merged with the `FormControl` props, with external props taking priority."
        }
      ],
      "returns": {
        "type": "P & FormControlForwardedProps"
      },
      "relatedTypes": [
        {
          "name": "FormControlForwardedProps",
          "properties": [
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Indicates if the form control is disabled."
            },
            {
              "name": "id",
              "type": "string",
              "description": "The id of the form control."
            },
            {
              "name": "required",
              "type": "boolean",
              "description": "Indicates if the form control is required."
            },
            {
              "name": "aria-describedby",
              "type": "string",
              "description": "The id of the element that describes the form control."
            }
          ]
        }
      ]
    },
    "useDetails": {
      "name": "useDetails",
      "importPath": "@primer/react",
      "stories": [
        {
          "id": "components-details--default"
        }
      ],
      "parameters": [
        {
          "name": "options",
          "type": "UseDetailsParameters",
          "required": true
        }
      ],
      "returns": {
        "type": "UseDetailsReturn"
      },
      "relatedTypes": [
        {
          "name": "UseDetailsReturn",
          "properties": [
            {
              "name": "open",
              "type": "boolean",
              "description": "Whether the details element is open."
            },
            {
              "name": "setOpen",
              "type": "React.Dispatch<React.SetStateAction<boolean>>",
              "description": "A function to set the open state."
            },
            {
              "name": "getDetailsProps",
              "type": "() => DetailsProps",
              "description": "A function to get the props to attach to the details element."
            }
          ]
        },
        {
          "name": "DetailsProps",
          "properties": [
            {
              "name": "onToggle",
              "type": "(e: React.SyntheticEvent<HTMLElement, Event>) => void",
              "description": "Callback function to handle toggling the details element."
            },
            {
              "name": "open",
              "type": "boolean",
              "description": "Whether the details element is open."
            },
            {
              "name": "ref",
              "type": "React.RefObject<HTMLDetailsElement>",
              "description": "A ref object to attach to the details element."
            }
          ]
        },
        {
          "name": "UseDetailsParameters",
          "properties": [
            {
              "name": "ref",
              "type": "React.RefObject<HTMLDetailsElement>",
              "description": "A ref object to attach to the details element."
            },
            {
              "name": "closeOnOutsideClick",
              "type": "boolean",
              "defaultValue": "false",
              "description": "Whether to close the details element when clicking outside of it."
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "defaultValue": "false",
              "description": "Whether the details element is open by default."
            },
            {
              "name": "onClickOutside",
              "type": "(event: MouseEvent) => void",
              "description": "Callback function to handle clicks outside the details element."
            }
          ]
        }
      ]
    },
    "useFocusTrap": {
      "name": "useFocusTrap",
      "importPath": "@primer/react",
      "stories": [
        {
          "id": "hooks-usefocustrap--custom-initial-focus"
        },
        {
          "id": "hooks-usefocustrap--dynamic-focus-trap-contents"
        },
        {
          "id": "hooks-usefocustrap--focus-trap"
        },
        {
          "id": "hooks-usefocustrap--multiple-focus-traps"
        },
        {
          "id": "hooks-usefocustrap--restore-focus"
        }
      ],
      "parameters": [
        {
          "name": "settings",
          "type": "FocusTrapSettings",
          "required": true,
          "description": "Configuration options for the focus trap."
        },
        {
          "name": "dependencies",
          "type": "Array",
          "required": true,
          "defaultValue": "[]",
          "description": "React.DependencyList"
        }
      ],
      "relatedTypes": [
        {
          "name": "FocusTrapSettings",
          "properties": [
            {
              "name": "containerRef",
              "type": "React.RefObject<HTMLElement>",
              "description": "Ref that will be used for the trapping container. If not provided, one will be created by this hook and returned."
            },
            {
              "name": "initialFocusRef",
              "type": "React.RefObject<HTMLElement>",
              "description": "Ref for the element that should receive focus when the focus trap is first enabled. If not provided, one will be created by this hook and returned. Its use is optional."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Set to true to disable the focus trap and clean up listeners. Can be re-enabled at any time."
            },
            {
              "name": "restoreFocusOnCleanUp",
              "type": "boolean",
              "description": "If true, when this focus trap is cleaned up, restore focus to the element that had focus immediately before the focus trap was enabled. (Default: false)"
            },
            {
              "name": "returnFocusRef",
              "type": "React.RefObject<HTMLElement>",
              "description": "If passed, when this focus trap is cleaned up, restore focus to this element instead of element with focus immediately before the focus trap was enabled. Overrides `restoreFocusOnCleanUp`."
            }
          ]
        },
        {
          "name": "FocusTrapRefs",
          "properties": [
            {
              "name": "containerRef",
              "type": "React.RefObject<HTMLElement>",
              "description": "Ref that will be used for the trapping container."
            },
            {
              "name": "initialFocusRef",
              "type": "React.RefObject<HTMLElement>",
              "description": "Ref for the child element that will receive focus first."
            }
          ]
        }
      ],
      "returns": {
        "type": "FocusTrapRefs",
        "description": "The refs for the trapping container and the initial focus element."
      }
    },
    "useFocusZone": {
      "name": "useFocusZone",
      "importPath": "@primer/react",
      "stories": [
        {
          "id": "hooks-usefocuszone--active-descendant"
        },
        {
          "id": "hooks-usefocuszone--basic-focus-zone"
        },
        {
          "id": "hooks-usefocuszone--changing-subtree"
        },
        {
          "id": "hooks-usefocuszone--custom-focus-movement"
        },
        {
          "id": "hooks-usefocuszone--focus-in-strategy"
        },
        {
          "id": "hooks-usefocuszone--focus-out-behavior"
        },
        {
          "id": "hooks-usefocuszone--nested-zones"
        },
        {
          "id": "hooks-usefocuszone--special-situations"
        }
      ],
      "parameters": [
        {
          "name": "settings",
          "type": "FocusZoneHookSettings",
          "description": "Configuration options for the focus zone."
        },
        {
          "name": "dependencies",
          "type": "React.DependencyList",
          "required": true,
          "defaultValue": "[]"
        }
      ],
      "relatedTypes": [
        {
          "name": "FocusZoneHookSettings",
          "properties": [
            {
              "name": "containerRef",
              "type": "React.RefObject<HTMLElement>",
              "description": "Optional ref for the container that holds all elements participating in arrow key focus. If one is not passed, we will create one for you and return it from the hook."
            },
            {
              "name": "activeDescendantFocus",
              "type": "boolean | React.RefObject<HTMLElement>",
              "description": "If using the 'active descendant' focus pattern, pass `true` or a ref to the controlling element. If a ref object is not passed, we will create one for you."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Set to true to disable the focus zone and clean up listeners. Can be re-enabled at any time."
            },
            {
              "name": "focusOutBehavior",
              "type": "'stop' | 'wrap'",
              "description": "Defines the behavior when focus moves out of the focus zone. Can be 'stop' or 'wrap'."
            },
            {
              "name": "getNextFocusable",
              "type": "(direction: 'previous' | 'next' | 'start' | 'end', from: Element | undefined, event: KeyboardEvent) => HTMLElement | undefined",
              "description": "Function to determine the next focusable element in the given direction."
            },
            {
              "name": "focusableElementFilter",
              "type": "(element: HTMLElement) => boolean",
              "description": "Function to filter which elements are focusable."
            },
            {
              "name": "bindKeys",
              "type": "enum FocusKeys {\nArrowHorizontal = 1,\nArrowVertical = 2,\nJK = 4,\nHL = 8,\nHomeAndEnd = 16,\nPageUpDown = 256,\nWS = 32,\nAD = 64,\nTab = 128,\nBackspace = 512,\nArrowAll = 3,\nHJKL = 12,\nWASD = 96,\nAll = 511\n}",
              "defaultValue": "FocusKeys.ArrowVertical",
              "description": "Keys that should be used to move focus within the focus zone."
            },
            {
              "name": "abortSignal",
              "type": "AbortSignal",
              "description": "Signal to abort the focus zone."
            },
            {
              "name": "activeDescendantControl",
              "type": "HTMLElement",
              "description": "Element that controls the active descendant."
            },
            {
              "name": "focusInStrategy",
              "type": "'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined)",
              "description": "Strategy to determine which element receives focus when entering the focus zone."
            },
            {
              "name": "preventScroll",
              "type": "boolean",
              "description": "Prevents scrolling when focusing elements."
            }
          ]
        },
        {
          "name": "FocusZoneRefs",
          "properties": [
            {
              "name": "containerRef",
              "type": "React.RefObject<HTMLElement>",
              "description": "Ref that will be used for the element with the children focus will be moved between."
            },
            {
              "name": "initialFocusRef",
              "type": "React.RefObject<HTMLElement>",
              "description": "Ref for the child element that will receive focus first."
            }
          ]
        },
        {
          "name": "FocusKeys (enum)",
          "properties": [
            {
              "name": "ArrowHorizontal",
              "type": "1",
              "description": "Left and right arrow keys. Prevents default behavior of scrolling where applicable."
            },
            {
              "name": "ArrowVertical",
              "type": "2",
              "description": "Up and down arrow keys. Prevents default behavior of scrolling where applicable."
            },
            {
              "name": "ArrowAll",
              "type": "3",
              "description": "Left, right, up, and down arrow keys. Prevents default behavior of scrolling where applicable."
            },
            {
              "name": "HomeAndEnd",
              "type": "16",
              "description": "Home and end keys. Causes focus to jump to the first or last focusable item in the container. Does not move focus if the currently-focused element is a text box."
            },
            {
              "name": "PageUpDown",
              "type": "256",
              "description": "Works the same as the Home and End keys. Advisable only when supplying a custom callback that supports paging."
            },
            {
              "name": "JK",
              "type": "4",
              "description": "J moves focus to the next item, K moves to the previous. Does not move focus if the currently-focused element is a text box. [Originally from](https://catonmat.net/why-vim-uses-hjkl-as-arrow-keys) the vi keybindings"
            },
            {
              "name": "HL",
              "type": "8",
              "description": "H moves focus to the previous item, L moves to the next. Does not move focus if the currently-focused element is a text box. [Originally from](https://catonmat.net/why-vim-uses-hjkl-as-arrow-keys) the vi keybindings"
            },
            {
              "name": "WS",
              "type": "32",
              "description": "W moves focus to the previous item, S moves to the next. Does not move focus if the currently-focused element is a text box."
            },
            {
              "name": "AD",
              "type": "64",
              "description": "A moves focus to the previous item, D moves to the next. Does not move focus if the currently-focused element is a text box."
            },
            {
              "name": "HJKL",
              "type": "12"
            },
            {
              "name": "WASD",
              "type": "96"
            },
            {
              "name": "Tab",
              "type": "128",
              "description": "Unlike other keys, the Tab key will always allow movement outside of the focus zone (use the Focus Trap behavior to prevent this). Tab moves to the next item, Shift+Tab moves to the previous."
            },
            {
              "name": "Backspace",
              "type": "512",
              "description": "Moves focus to the previous item. Does not move focus if the currently-focused element is a text box."
            },
            {
              "name": "All",
              "type": "511",
              "description": "All keys listed above are bound."
            }
          ]
        }
      ],
      "returns": {
        "type": "FocusZoneRefs",
        "description": "The refs for the trapping container and the initial focus element."
      }
    },
    "useOnEscapePress": {
      "name": "useOnEscapePress",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [
        {
          "name": "onEscape",
          "type": "(e: KeyboardEvent) => void",
          "required": true,
          "description": "The callback that gets executed when the Escape key is pressed. The KeyboardEvent generated by the Escape keypress is passed as the only argument."
        },
        {
          "name": "callbackDependencies",
          "type": "React.DependencyList",
          "defaultValue": "[onEscape]",
          "required": true,
          "description": "The dependencies of the given `onEscape` callback for memoization. Omit this param if the callback is already memoized. See `React.useCallback` for more info on memoization."
        }
      ],
      "returns": {
        "type": "void"
      }
    },
    "useOnOutsideClick": {
      "name": "useOnOutsideClick",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [
        {
          "name": "settings",
          "type": "UseOnOutsideClickSettings",
          "required": true,
          "description": "Settings for the useOnOutsideClick hook."
        }
      ],
      "returns": {
        "type": "void"
      },
      "relatedTypes": [
        {
          "name": "UseOnOutsideClickSettings",
          "properties": [
            {
              "name": "containerRef",
              "type": "React.RefObject<HTMLDivElement> | React.RefObject<HTMLUListElement>",
              "required": true,
              "description": "A ref to the container element to detect outside clicks."
            },
            {
              "name": "ignoreClickRefs",
              "type": "React.RefObject<HTMLElement>[]",
              "description": "An array of refs to elements that should be ignored when detecting outside clicks."
            },
            {
              "name": "onClickOutside",
              "type": "(e: MouseEvent | TouchEvent) => void",
              "required": true,
              "description": "Callback function to be called when an outside click is detected."
            }
          ]
        }
      ]
    },
    "useOpenAndCloseFocus": {
      "name": "useOpenAndCloseFocus",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [
        {
          "name": "openAndCloseFocusSettings",
          "type": "UseOpenAndCloseFocusSettings",
          "required": true,
          "description": "Configuration options for open and close focus behavior."
        }
      ],
      "returns": {
        "type": "void"
      },
      "relatedTypes": [
        {
          "name": "UseOpenAndCloseFocusSettings",
          "properties": [
            {
              "name": "initialFocusRef",
              "type": "React.RefObject<HTMLElement>",
              "description": "A ref to the element that should receive focus when the container is opened. If no ref is passed to `initialFocusRef`, the hook focuses the first focusable element inside of the container."
            },
            {
              "name": "containerRef",
              "type": "React.RefObject<HTMLElement>",
              "required": true,
              "description": "A ref to the container element that contains focusable elements."
            },
            {
              "name": "returnFocusRef",
              "type": "React.RefObject<HTMLElement>",
              "required": true,
              "description": "A ref to the element that should receive focus when the container is closed."
            },
            {
              "name": "preventFocusOnOpen",
              "type": "boolean",
              "defaultValue": "false",
              "description": "If true, focus will not be set when the container is opened."
            }
          ]
        }
      ]
    },
    "useOverflow": {
      "name": "useOverflow",
      "importPath": "@primer/react/experimental",
      "stories": [],
      "parameters": [
        {
          "name": "ref",
          "type": "React.RefObject<T>",
          "required": true,
          "description": "A reference to the HTML element to observe for overflow."
        }
      ],
      "returns": {
        "type": "boolean",
        "description": "A boolean indicating whether the element has overflow."
      }
    },
    "useOverlay": {
      "name": "useOverlay",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [
        {
          "name": "overlaySettings",
          "type": "UseOverlaySettings",
          "description": "Configuration options for the overlay behavior."
        }
      ],
      "returns": {
        "type": "React.RefObject<HTMLDivElement>",
        "description": "A ref object attached to the overlay element."
      },
      "relatedTypes": [
        {
          "name": "UseOverlaySettings",
          "properties": [
            {
              "name": "ignoreClickRefs",
              "type": "React.RefObject<HTMLElement>[]",
              "description": "Refs to click clicks on in the `onOutsideClick` function, useful for ignoring clicks on elements that trigger the overlay visibility."
            },
            {
              "name": "initialFocusRef",
              "type": "React.RefObject<HTMLElement>",
              "description": "Ref to focus when overlay is mounted."
            },
            {
              "name": "returnFocusRef",
              "type": "React.RefObject<HTMLElement>",
              "required": true,
              "description": "Ref to focus when overlay is unmounted. Important for accessibility."
            },
            {
              "name": "onEscape",
              "type": "(e: KeyboardEvent) => void",
              "required": true,
              "description": "Function to call when user presses the Escape key."
            },
            {
              "name": "onClickOutside",
              "type": "(e: TouchOrMouseEvent) => void",
              "required": true,
              "description": "Function to call when user clicks outside of the overlay."
            },
            {
              "name": "preventFocusOnOpen",
              "type": "boolean",
              "description": "Flag to prevent focus on the overlay when it is opened."
            }
          ]
        }
      ]
    },
    "useProvidedRefOrCreate": {
      "name": "useProvidedRefOrCreate",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [
        {
          "name": "providedRef",
          "type": "React.RefObject<TRef>",
          "description": "The ref to use - if undefined, will use the ref from a call to React.useRef"
        }
      ],
      "returns": {
        "type": "React.RefObject<TRef>"
      }
    },
    "useRefObjectAsForwardedRef": {
      "name": "useRefObjectAsForwardedRef",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [
        {
          "name": "forwardedRef",
          "type": "ForwardedRef<T>",
          "required": true,
          "description": "The forwarded ref to synchronize with the ref object."
        },
        {
          "name": "refObject",
          "type": "RefObject<T>",
          "required": true,
          "description": "The ref object to use as the imperative handle."
        }
      ],
      "returns": {
        "type": "void"
      }
    },
    "useResizeObserver": {
      "name": "useResizeObserver",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [
        {
          "name": "callback",
          "type": "(entries: ResizeObserverEntry[]) => void",
          "required": true,
          "description": "A callback function that is invoked when the observed element's size changes."
        },
        {
          "name": "target",
          "type": "RefObject<T>",
          "description": "A React ref object pointing to the target element to observe. If not provided, the document's root element is observed."
        },
        {
          "name": "depsArray",
          "type": "unknown[]",
          "defaultValue": "[]",
          "description": "An array of dependencies that will trigger the effect when changed."
        }
      ],
      "returns": {
        "type": "void"
      },
      "relatedTypes": [
        {
          "name": "ResizeObserverEntry",
          "properties": [
            {
              "name": "contentRect",
              "type": "DOMRectReadOnly",
              "required": true,
              "description": "A read-only rectangle describing the size of the observed element."
            }
          ]
        }
      ]
    },
    "useResponsiveValue": {
      "name": "useResponsiveValue",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [
        {
          "name": "value",
          "type": "T",
          "description": "The responsive value to resolve. It can be a single value or an object with viewport range keys.",
          "required": true
        },
        {
          "name": "fallback",
          "type": "F",
          "description": "The fallback value to use if the responsive value does not match the current viewport.",
          "required": true
        }
      ],
      "returns": {
        "type": "(T extends ResponsiveValue<infer TRegular, infer TNarrow, infer TWide> ? TRegular | TNarrow | TWide : never) | F",
        "description": "The resolved value based on the current viewport width."
      },
      "relatedTypes": [
        {
          "name": "ResponsiveValue",
          "properties": [
            {
              "name": "narrow",
              "type": "TNarrow",
              "description": "Applies when viewport is narrow"
            },
            {
              "name": "regular",
              "type": "TRegular",
              "description": "Applies when viewport is regular"
            },
            {
              "name": "wide",
              "type": "TWide",
              "description": "Applies when viewport is wide"
            }
          ]
        }
      ]
    },
    "useSafeTimeout": {
      "name": "useSafeTimeout",
      "importPath": "@primer/react",
      "stories": [],
      "returns": {
        "type": "{safeSetTimeout: SetTimeout; safeClearTimeout: ClearTimeout}"
      },
      "relatedTypes": [
        {
          "name": "SetTimeout",
          "properties": [
            {
              "name": "handler",
              "type": "TimerHandler",
              "required": true,
              "description": "The function to be executed after the timeout."
            },
            {
              "name": "timeout",
              "type": "number",
              "description": "The time, in milliseconds, the timer should wait before the specified function or code is executed."
            },
            {
              "name": "args",
              "type": "unknown[]",
              "description": "Additional arguments which are passed through to the function specified by handler."
            }
          ]
        },
        {
          "name": "ClearTimeout",
          "properties": [
            {
              "name": "id",
              "type": "number",
              "required": true,
              "description": "The identifier of the timeout you want to cancel."
            }
          ]
        }
      ]
    },
    "useIsomorphicLayoutEffect": {
      "name": "useIsomorphicLayoutEffect",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [],
      "returns": {
        "type": "void"
      }
    },
    "useTheme": {
      "name": "useTheme",
      "importPath": "@primer/react",
      "stories": [],
      "parameters": [],
      "returns": {
        "type": "ThemeData"
      },
      "relatedTypes": [
        {
          "name": "ThemeProviderProps",
          "properties": [
            {
              "name": "theme",
              "type": "{[key: string]: any}",
              "description": "The theme object to be applied."
            },
            {
              "name": "colorMode",
              "type": "'auto' | 'day' | 'night' | 'light' | 'dark'",
              "description": "The color mode to be applied."
            },
            {
              "name": "dayScheme",
              "type": "string",
              "description": "The color scheme for the day color mode."
            },
            {
              "name": "nightScheme",
              "type": "string",
              "description": "The color scheme for the night color mode."
            },
            {
              "name": "preventSSRMismatch",
              "type": "boolean",
              "description": "Prevent SSR mismatch by injecting server-side color mode."
            }
          ]
        },
        {
          "name": "ThemeData",
          "properties": [
            {
              "name": "theme",
              "type": "Theme",
              "description": "The theme object that is applied."
            },
            {
              "name": "colorScheme",
              "type": "string",
              "description": "The color scheme (for example: \"light\", \"dark\") that is applied."
            },
            {
              "name": "colorMode",
              "type": "'auto' | 'day' | 'night' | 'light' | 'dark'",
              "description": "The color mode (for example: \"day\", \"night\") that is applied. If the color mode is \"auto\", the color mode is determined by the user's system preference."
            },
            {
              "name": "resolvedColorScheme",
              "type": "string",
              "description": "The name of the current color scheme."
            },
            {
              "name": "resolvedColorMode",
              "type": "'day' | 'night' | 'light' | 'dark'",
              "description": "If the color mode is set to \"auto\", the resolved color mode will be determined by the user's system preference."
            },
            {
              "name": "dayScheme",
              "type": "string",
              "description": "The color scheme for the day color mode."
            },
            {
              "name": "nightScheme",
              "type": "string",
              "description": "The color scheme for the night color mode."
            },
            {
              "name": "setColorMode",
              "type": "React.Dispatch<React.SetStateAction<'auto' | 'day' | 'night' | 'light' | 'dark'>>",
              "description": "A function to set the color mode."
            },
            {
              "name": "setDayScheme",
              "type": "React.Dispatch<React.SetStateAction<string>>",
              "description": "A function to set the color scheme for the day color mode."
            },
            {
              "name": "setNightScheme",
              "type": "React.Dispatch<React.SetStateAction<string>>",
              "description": "A function to set the color scheme for the night color mode."
            }
          ]
        }
      ]
    }
  }
}