@ariakit/react-core 0.0.1 → 0.1.0

package/esm/utils/system.d.ts

@@ -0,0 +1,74 @@
+import type { ElementType, ReactElement } from "react";
+import type { Component, HTMLProps, Hook, Options, Props } from "./types.js";
+/**
+ * Creates a type-safe component with the `as` prop and `React.forwardRef`.
+ *
+ * @example
+ * import { createComponent } from "@ariakit/react-core/utils/system";
+ *
+ * type Props = {
+ *   as?: "div";
+ *   customProp?: boolean;
+ * };
+ *
+ * const Component = createComponent<Props>(({ customProp, ...props }) => {
+ *   return <div {...props} />;
+ * });
+ *
+ * <Component as="button" customProp />
+ */
+export declare function createComponent<O extends Options>(render: (props: Props<O>) => ReactElement): Component<O>;
+/**
+ * Creates a type-safe component with the `as` prop, `React.forwardRef` and
+ * `React.memo`.
+ *
+ * @example
+ * import { createMemoComponent } from "@ariakit/react-core/utils/system";
+ *
+ * type Props = {
+ *   as?: "div";
+ *   customProp?: boolean;
+ * };
+ *
+ * const Component = createMemoComponent<Props>(({ customProp, ...props }) => {
+ *   return <div {...props} />;
+ * });
+ *
+ * <Component as="button" customProp />
+ */
+export declare function createMemoComponent<O extends Options>(render: (props: Props<O>) => ReactElement): Component<O>;
+/**
+ * Creates a React element that supports the `as` prop, children as a
+ * function (render props) and a `wrapElement` function.
+ *
+ * @example
+ * import { createElement } from "@ariakit/react-core/utils/system";
+ *
+ * function Component() {
+ *   const props = {
+ *     as: "button" as const,
+ *     children: (htmlProps) => <button {...htmlProps} />,
+ *     wrapElement: (element) => <div>{element}</div>,
+ *   };
+ *   return createElement("div", props);
+ * }
+ */
+export declare function createElement(Type: ElementType, props: HTMLProps<Options>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Creates a component hook that accepts props and returns props so they can be
+ * passed to a React element.
+ *
+ * @example
+ * import { Options, createHook } from "@ariakit/react-core/utils/system";
+ *
+ * type Props = Options<"div"> & {
+ *   customProp?: boolean;
+ * };
+ *
+ * const useComponent = createHook<Props>(({ customProp, ...props }) => {
+ *   return props;
+ * });
+ *
+ * const props = useComponent({ as: "button", customProp: true });
+ */
+export declare function createHook<O extends Options>(useProps: (props: Props<O>) => HTMLProps<O>): Hook<O>;

package/esm/utils/system.js

@@ -0,0 +1,12 @@
+import {
+  createComponent,
+  createElement,
+  createHook,
+  createMemoComponent
+} from "../__chunks/JE5NWDDX.js";
+export {
+  createComponent,
+  createElement,
+  createHook,
+  createMemoComponent
+};

package/esm/utils/types.d.ts

@@ -0,0 +1,73 @@
+import type { ComponentPropsWithRef, ElementType, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from "react";
+import type { AnyObject } from "@ariakit/core/utils/types";
+/**
+ * Render prop type.
+ * @template P Props
+ * @example
+ * const children: RenderProp = (props) => <div {...props} />;
+ */
+export type RenderProp<P = AnyObject> = (props: P) => ReactNode;
+/**
+ * The `as` prop.
+ * @template P Props
+ */
+export type As<P = any> = ElementType<P>;
+/**
+ * The `wrapElement` prop.
+ */
+export type WrapElement = (element: ReactElement) => ReactElement;
+/**
+ * The `children` prop that supports a function.
+ * @template T Element type.
+ */
+export type Children<T = any> = ReactNode | RenderProp<HTMLAttributes<T> & RefAttributes<T>>;
+/**
+ * Props with the `as` prop.
+ * @template T The `as` prop
+ * @example
+ * type ButtonOptions = Options<"button">;
+ */
+export type Options<T extends As = any> = {
+    as?: T;
+};
+/**
+ * Props that automatically includes HTML props based on the `as` prop.
+ * @template O Options
+ * @example
+ * type ButtonHTMLProps = HTMLProps<Options<"button">>;
+ */
+export type HTMLProps<O extends Options> = {
+    wrapElement?: WrapElement;
+    children?: Children;
+    [index: `data-${string}`]: unknown;
+} & Omit<ComponentPropsWithRef<NonNullable<O["as"]>>, keyof O | "children">;
+/**
+ * Options & HTMLProps
+ * @template O Options
+ * @example
+ * type ButtonProps = Props<Options<"button">>;
+ */
+export type Props<O extends Options> = O & HTMLProps<O>;
+/**
+ * A component that supports the `as` prop and the `children` prop as a
+ * function.
+ * @template O Options
+ * @example
+ * type ButtonComponent = Component<Options<"button">>;
+ */
+export type Component<O extends Options> = {
+    <T extends As>(props: Omit<O, "as"> & Omit<HTMLProps<Options<T>>, keyof O> & Required<Options<T>>): JSX.Element | null;
+    (props: Props<O>): JSX.Element | null;
+    displayName?: string;
+};
+/**
+ * A component hook that supports the `as` prop and the `children` prop as a
+ * function.
+ * @template O Options
+ * @example
+ * type ButtonHook = Hook<Options<"button">>;
+ */
+export type Hook<O extends Options> = {
+    <T extends As = NonNullable<O["as"]>>(props?: Omit<O, "as"> & Omit<HTMLProps<Options<T>>, keyof O> & Options<T>): HTMLProps<Options<T>>;
+    displayName?: string;
+};

package/esm/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,29 @@
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `VisuallyHidden` component. When applying the props
+ * returned by this hook to a component, the component will be visually hidden,
+ * but still accessible to screen readers.
+ * @see https://ariakit.org/components/visually-hidden
+ * @example
+ * ```jsx
+ * const props = useVisuallyHidden();
+ * <a href="#">
+ *   Learn more<Role {...props}> about the Solar System</Role>.
+ * </a>
+ * ```
+ */
+export declare const useVisuallyHidden: import("../utils/types.js").Hook<VisuallyHiddenOptions<"span">>;
+/**
+ * Renders an element that's visually hidden, but still accessible to screen
+ * readers.
+ * @see https://ariakit.org/components/visually-hidden
+ * @example
+ * ```jsx
+ * <a href="#">
+ *   Learn more<VisuallyHidden> about the Solar System</VisuallyHidden>.
+ * </a>
+ * ```
+ */
+export declare const VisuallyHidden: import("../utils/types.js").Component<VisuallyHiddenOptions<"span">>;
+export type VisuallyHiddenOptions<T extends As = "span"> = Options<T>;
+export type VisuallyHiddenProps<T extends As = "span"> = Props<VisuallyHiddenOptions<T>>;

package/esm/visually-hidden/visually-hidden.js

@@ -0,0 +1,9 @@
+import {
+  VisuallyHidden,
+  useVisuallyHidden
+} from "../__chunks/SDULECC7.js";
+import "../__chunks/JE5NWDDX.js";
+export {
+  VisuallyHidden,
+  useVisuallyHidden
+};

package/focus-trap/focus-trap/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/focus-trap/focus-trap",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/focus-trap/focus-trap",
+  "module": "../../esm/focus-trap/focus-trap"
+}

package/focus-trap/focus-trap-region/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/focus-trap/focus-trap-region",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/focus-trap/focus-trap-region",
+  "module": "../../esm/focus-trap/focus-trap-region"
+}

package/focusable/focusable/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/focusable/focusable",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/focusable/focusable",
+  "module": "../../esm/focusable/focusable"
+}

package/form/form/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form",
+  "module": "../../esm/form/form"
+}

package/form/form-checkbox/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-checkbox",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-checkbox",
+  "module": "../../esm/form/form-checkbox"
+}

package/form/form-context/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-context",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-context",
+  "module": "../../esm/form/form-context"
+}

package/form/form-description/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-description",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-description",
+  "module": "../../esm/form/form-description"
+}

package/form/form-error/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-error",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-error",
+  "module": "../../esm/form/form-error"
+}

package/form/form-field/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-field",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-field",
+  "module": "../../esm/form/form-field"
+}

package/form/form-group/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-group",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-group",
+  "module": "../../esm/form/form-group"
+}

package/form/form-group-label/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-group-label",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-group-label",
+  "module": "../../esm/form/form-group-label"
+}

package/form/form-input/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-input",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-input",
+  "module": "../../esm/form/form-input"
+}

package/form/form-label/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-label",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-label",
+  "module": "../../esm/form/form-label"
+}

package/form/form-push/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-push",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-push",
+  "module": "../../esm/form/form-push"
+}

package/form/form-radio/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-radio",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-radio",
+  "module": "../../esm/form/form-radio"
+}

package/form/form-radio-group/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-radio-group",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-radio-group",
+  "module": "../../esm/form/form-radio-group"
+}

package/form/form-remove/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-remove",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-remove",
+  "module": "../../esm/form/form-remove"
+}

package/form/form-reset/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-reset",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-reset",
+  "module": "../../esm/form/form-reset"
+}

package/form/form-store/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-store",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-store",
+  "module": "../../esm/form/form-store"
+}

package/form/form-submit/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/form/form-submit",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/form/form-submit",
+  "module": "../../esm/form/form-submit"
+}

package/group/group/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/group/group",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/group/group",
+  "module": "../../esm/group/group"
+}

package/group/group-label/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/group/group-label",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/group/group-label",
+  "module": "../../esm/group/group-label"
+}

package/group/group-label-context/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/group/group-label-context",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/group/group-label-context",
+  "module": "../../esm/group/group-label-context"
+}

package/heading/heading/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/heading/heading",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/heading/heading",
+  "module": "../../esm/heading/heading"
+}

package/heading/heading-context/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/heading/heading-context",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/heading/heading-context",
+  "module": "../../esm/heading/heading-context"
+}

package/heading/heading-level/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/heading/heading-level",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/heading/heading-level",
+  "module": "../../esm/heading/heading-level"
+}

package/heading/utils/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/heading/utils",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/heading/utils",
+  "module": "../../esm/heading/utils"
+}

package/hovercard/hovercard/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/hovercard/hovercard",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/hovercard/hovercard",
+  "module": "../../esm/hovercard/hovercard"
+}

package/hovercard/hovercard-anchor/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/hovercard/hovercard-anchor",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/hovercard/hovercard-anchor",
+  "module": "../../esm/hovercard/hovercard-anchor"
+}

package/hovercard/hovercard-arrow/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/hovercard/hovercard-arrow",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/hovercard/hovercard-arrow",
+  "module": "../../esm/hovercard/hovercard-arrow"
+}

package/hovercard/hovercard-description/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/hovercard/hovercard-description",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/hovercard/hovercard-description",
+  "module": "../../esm/hovercard/hovercard-description"
+}

package/hovercard/hovercard-disclosure/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/hovercard/hovercard-disclosure",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/hovercard/hovercard-disclosure",
+  "module": "../../esm/hovercard/hovercard-disclosure"
+}

package/hovercard/hovercard-dismiss/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/hovercard/hovercard-dismiss",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/hovercard/hovercard-dismiss",
+  "module": "../../esm/hovercard/hovercard-dismiss"
+}

package/hovercard/hovercard-heading/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/hovercard/hovercard-heading",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/hovercard/hovercard-heading",
+  "module": "../../esm/hovercard/hovercard-heading"
+}

package/hovercard/hovercard-store/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/hovercard/hovercard-store",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/hovercard/hovercard-store",
+  "module": "../../esm/hovercard/hovercard-store"
+}

package/hovercard/utils/debug-polygon/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/hovercard/utils/debug-polygon",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/hovercard/utils/debug-polygon",
+  "module": "../../../esm/hovercard/utils/debug-polygon"
+}

package/hovercard/utils/polygon/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/hovercard/utils/polygon",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../../cjs/hovercard/utils/polygon",
+  "module": "../../../esm/hovercard/utils/polygon"
+}

package/license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Diego Haz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/menu/menu/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/menu/menu",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/menu/menu",
+  "module": "../../esm/menu/menu"
+}

package/menu/menu-arrow/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/menu/menu-arrow",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/menu/menu-arrow",
+  "module": "../../esm/menu/menu-arrow"
+}

package/menu/menu-bar/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/menu/menu-bar",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/menu/menu-bar",
+  "module": "../../esm/menu/menu-bar"
+}

package/menu/menu-bar-store/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/menu/menu-bar-store",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/menu/menu-bar-store",
+  "module": "../../esm/menu/menu-bar-store"
+}

package/menu/menu-button/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/menu/menu-button",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/menu/menu-button",
+  "module": "../../esm/menu/menu-button"
+}

package/menu/menu-button-arrow/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/menu/menu-button-arrow",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/menu/menu-button-arrow",
+  "module": "../../esm/menu/menu-button-arrow"
+}

package/menu/menu-context/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/menu/menu-context",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/menu/menu-context",
+  "module": "../../esm/menu/menu-context"
+}

package/menu/menu-description/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/menu/menu-description",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/menu/menu-description",
+  "module": "../../esm/menu/menu-description"
+}

package/menu/menu-dismiss/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@ariakit/react-core/menu/menu-dismiss",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/menu/menu-dismiss",
+  "module": "../../esm/menu/menu-dismiss"
+}