@ariakit/react-core 0.0.1 → 0.1.0

package/esm/popover/popover.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from "react";
+import type { DialogOptions } from "../dialog/dialog.js";
+import type { As, Props } from "../utils/types.js";
+import type { PopoverStore } from "./popover-store.js";
+/**
+ * Returns props to create a `Popover` component.
+ * @see https://ariakit.org/components/popover
+ * @example
+ * ```jsx
+ * const store = usePopoverStore();
+ * const props = usePopover({ store });
+ * <Role {...props}>Popover</Role>
+ * ```
+ */
+export declare const usePopover: import("../utils/types.js").Hook<PopoverOptions<"div">>;
+/**
+ * Renders a popover element.
+ * @see https://ariakit.org/components/popover
+ * @example
+ * ```jsx
+ * const popover = usePopoverStore();
+ * <PopoverDisclosure store={popover}>Disclosure</PopoverDisclosure>
+ * <Popover store={popover}>Popover</Popover>
+ * ```
+ */
+export declare const Popover: import("../utils/types.js").Component<PopoverOptions<"div">>;
+export interface PopoverOptions<T extends As = "div"> extends DialogOptions<T> {
+    /**
+     * Object returned by the `usePopoverStore` hook.
+     */
+    store: PopoverStore;
+    /**
+     * Props that will be passed to the popover wrapper element. This element will
+     * be used to position the popover.
+     */
+    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+}
+export type PopoverProps<T extends As = "div"> = Props<PopoverOptions<T>>;

package/esm/popover/popover.js

@@ -0,0 +1,34 @@
+import {
+  Popover,
+  usePopover
+} from "../__chunks/JUUV3EHC.js";
+import "../__chunks/NO5K4U2Q.js";
+import "../__chunks/4U6AOLE4.js";
+import "../__chunks/HLAXMBLL.js";
+import "../__chunks/WO2RXMKK.js";
+import "../__chunks/PU22SOKH.js";
+import "../__chunks/547F7FFZ.js";
+import "../__chunks/NV7HSBKK.js";
+import "../__chunks/2SVAPVVI.js";
+import "../__chunks/HVXLVRRR.js";
+import "../__chunks/7JNF6I52.js";
+import "../__chunks/LFCJQX2O.js";
+import "../__chunks/ZVCQYVEV.js";
+import "../__chunks/EJZ6BVXG.js";
+import "../__chunks/6OMX4H3W.js";
+import "../__chunks/COQHFAEN.js";
+import "../__chunks/LNHZLQEK.js";
+import "../__chunks/6GS36SYX.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/3OSYJZM5.js";
+import "../__chunks/NDTB3OGK.js";
+import "../__chunks/LDDPB3PY.js";
+import "../__chunks/FFRIGW5T.js";
+import "../__chunks/SDULECC7.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  Popover,
+  usePopover
+};

package/esm/portal/portal-context.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Stores the element that will contain the portal. By default, it will be the
+ * body of the document.
+ * @example
+ * ```jsx
+ * const container = document.getElementById("container");
+ *
+ * function App() {
+ *   return (
+ *     <PortalContext.Provider value={container}>
+ *       <Portal />
+ *     </PortalContext.Provider>
+ *   );
+ * }
+ * ```
+ */
+export declare const PortalContext: import("react").Context<HTMLElement | null>;

package/esm/portal/portal-context.js

@@ -0,0 +1,6 @@
+import {
+  PortalContext
+} from "../__chunks/LDDPB3PY.js";
+export {
+  PortalContext
+};

package/esm/portal/portal.d.ts

@@ -0,0 +1,64 @@
+import type { MutableRefObject, RefCallback } from "react";
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `Portal` component.
+ * @see https://ariakit.org/components/portal
+ * @example
+ * ```jsx
+ * const props = usePortal();
+ * <Role {...props}>Content</Role>
+ * ```
+ */
+export declare const usePortal: import("../utils/types.js").Hook<PortalOptions<"div">>;
+/**
+ * Renders an element using `ReactDOM.createPortal`.
+ * @see https://ariakit.org/components/portal
+ * @example
+ * ```jsx
+ * <Portal>Content</Portal>
+ * ```
+ */
+export declare const Portal: import("../utils/types.js").Component<PortalOptions<"div">>;
+export interface PortalOptions<T extends As = "div"> extends Options<T> {
+    /**
+     * When enabled, `preserveTabOrder` will keep the DOM element's tab order the
+     * same as the order in which the `Portal` component was mounted in the React
+     * tree.
+     * @default false
+     */
+    preserveTabOrder?: boolean;
+    /**
+     * `portalRef` is similar to `ref` but is scoped to the portal node. It's
+     * useful when you need to be informed when the portal element is appended to
+     * the DOM or removed from the DOM.
+     * @example
+     * const [portalElement, setPortalElement] = useState(null);
+     * <Portal portalRef={setPortalElement} />;
+     */
+    portalRef?: RefCallback<HTMLElement> | MutableRefObject<HTMLElement | null>;
+    /**
+     * Determines whether the element should be rendered as a React Portal.
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * An HTML element or a memoized callback function that returns an HTML
+     * element to be used as the portal element. By default, the portal element
+     * will be a `div` element appended to the `document.body`.
+     * @default HTMLDivElement
+     * @example
+     * const [portal, setPortal] = useState(null);
+     * <Portal portalElement={portal} />;
+     * <div ref={setPortal} />;
+     * @example
+     * const getPortalElement = useCallback(() => {
+     *   const div = document.createElement("div");
+     *   const portalRoot = document.getElementById("portal-root");
+     *   portalRoot.appendChild(div);
+     *   return div;
+     * }, []);
+     * <Portal portalElement={getPortalElement} />;
+     */
+    portalElement?: ((element: HTMLElement) => HTMLElement | null) | HTMLElement | null;
+}
+export type PortalProps<T extends As = "div"> = Props<PortalOptions<T>>;

package/esm/portal/portal.js

@@ -0,0 +1,14 @@
+import {
+  Portal,
+  usePortal
+} from "../__chunks/3OSYJZM5.js";
+import "../__chunks/NDTB3OGK.js";
+import "../__chunks/LDDPB3PY.js";
+import "../__chunks/SDULECC7.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  Portal,
+  usePortal
+};

package/esm/radio/radio-context.d.ts

@@ -0,0 +1,2 @@
+import type { RadioStore } from "./radio-store.js";
+export declare const RadioContext: import("react").Context<RadioStore | undefined>;

package/esm/radio/radio-context.js

@@ -0,0 +1,6 @@
+import {
+  RadioContext
+} from "../__chunks/6I2PARRP.js";
+export {
+  RadioContext
+};

package/esm/radio/radio-group.d.ts

@@ -0,0 +1,37 @@
+import type { CompositeOptions } from "../composite/composite.js";
+import type { As, Props } from "../utils/types.js";
+import type { RadioStore } from "./radio-store.js";
+/**
+ * Returns props to create a `RadioGroup` component.
+ * @see https://ariakit.org/components/radio
+ * @example
+ * ```jsx
+ * const store = useRadioStore();
+ * const props = useRadioGroup({ store });
+ * <Role {...props}>
+ *   <Radio value="Apple" />
+ *   <Radio value="Orange" />
+ * </Role>
+ * ```
+ */
+export declare const useRadioGroup: import("../utils/types.js").Hook<RadioGroupOptions<"div">>;
+/**
+ * Renders a radio group element.
+ * @see https://ariakit.org/components/radio
+ * @example
+ * ```jsx
+ * const radio = useRadioStore();
+ * <RadioGroup store={radio}>
+ *   <Radio value="Apple" />
+ *   <Radio value="Orange" />
+ * </RadioGroup>
+ * ```
+ */
+export declare const RadioGroup: import("../utils/types.js").Component<RadioGroupOptions<"div">>;
+export interface RadioGroupOptions<T extends As = "div"> extends CompositeOptions<T> {
+    /**
+     * Object returned by the `useRadioStore` hook.
+     */
+    store: RadioStore;
+}
+export type RadioGroupProps<T extends As = "div"> = Props<RadioGroupOptions<T>>;

package/esm/radio/radio-group.js

@@ -0,0 +1,47 @@
+import {
+  RadioContext
+} from "../__chunks/6I2PARRP.js";
+import {
+  useComposite
+} from "../__chunks/FXC76SFN.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useWrapElement
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/radio/radio-group.tsx
+import { jsx } from "react/jsx-runtime";
+var useRadioGroup = createHook(
+  ({ store, ...props }) => {
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(RadioContext.Provider, { value: store, children: element }),
+      [store]
+    );
+    props = {
+      role: "radiogroup",
+      ...props
+    };
+    props = useComposite({ store, ...props });
+    return props;
+  }
+);
+var RadioGroup = createComponent((props) => {
+  const htmlProps = useRadioGroup(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  RadioGroup.displayName = "RadioGroup";
+}
+export {
+  RadioGroup,
+  useRadioGroup
+};

package/esm/radio/radio-store.d.ts

@@ -0,0 +1,42 @@
+import * as Core from "@ariakit/core/radio/radio-store";
+import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { Store } from "../utils/store.js";
+export declare function useRadioStoreOptions(props: RadioStoreProps): Partial<import("../collection/collection-store.js").CollectionStoreOptions<{
+    id: string;
+    element?: HTMLElement | null | undefined;
+} & {
+    rowId?: string | undefined;
+    disabled?: boolean | undefined;
+    children?: string | undefined;
+}>>;
+export declare function useRadioStoreProps<T extends RadioStore>(store: T, props: RadioStoreProps): T;
+/**
+ * Creates a radio store.
+ * @see https://ariakit.org/components/radio
+ * @example
+ * ```jsx
+ * const radio = useRadioStore();
+ * <RadioGroup store={radio}>
+ *   <Radio value="Apple" />
+ *   <Radio value="Orange" />
+ * </RadioGroup>
+ * ```
+ */
+export declare function useRadioStore(props?: RadioStoreProps): RadioStore;
+export interface RadioStoreState extends Core.RadioStoreState, CompositeStoreState {
+}
+export interface RadioStoreFunctions extends Core.RadioStoreFunctions, CompositeStoreFunctions {
+}
+export interface RadioStoreOptions extends Core.RadioStoreOptions, CompositeStoreOptions {
+    /**
+     * Function that will be called when the `value` state changes.
+     * @param value The new value.
+     * @example
+     * function RadioGroup({ value, onChange }) {
+     *   const radio = useRadioStore({ value, setValue: onChange });
+     * }
+     */
+    setValue?: (value: RadioStoreState["value"]) => void;
+}
+export type RadioStoreProps = RadioStoreOptions & Core.RadioStoreProps;
+export type RadioStore = RadioStoreFunctions & Store<Core.RadioStore>;

package/esm/radio/radio-store.js

@@ -0,0 +1,32 @@
+import {
+  useCompositeStoreOptions,
+  useCompositeStoreProps
+} from "../__chunks/2EP53RLR.js";
+import "../__chunks/56XURSTF.js";
+import {
+  useStore,
+  useStoreProps
+} from "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/radio/radio-store.ts
+import * as Core from "@ariakit/core/radio/radio-store";
+function useRadioStoreOptions(props) {
+  return useCompositeStoreOptions(props);
+}
+function useRadioStoreProps(store, props) {
+  store = useCompositeStoreProps(store, props);
+  useStoreProps(store, props, "value", "setValue");
+  return store;
+}
+function useRadioStore(props = {}) {
+  const options = useRadioStoreOptions(props);
+  const store = useStore(() => Core.createRadioStore({ ...props, ...options }));
+  return useRadioStoreProps(store, props);
+}
+export {
+  useRadioStore,
+  useRadioStoreOptions,
+  useRadioStoreProps
+};

package/esm/radio/radio.d.ts

@@ -0,0 +1,52 @@
+import type { SyntheticEvent } from "react";
+import type { BivariantCallback } from "@ariakit/core/utils/types";
+import type { CompositeItemOptions } from "../composite/composite-item.js";
+import type { As, Props } from "../utils/types.js";
+import type { RadioStore } from "./radio-store.js";
+/**
+ * Returns props to create a `Radio` component.
+ * @see https://ariakit.org/components/radio
+ * @example
+ * ```jsx
+ * const store = useRadioStore();
+ * const props = useRadio({ store, value: "Apple" });
+ * <RadioGroup store={store}>
+ *   <Role as="input" {...props} />
+ *   <Radio value="Orange" />
+ * </RadioGroup>
+ * ```
+ */
+export declare const useRadio: import("../utils/types.js").Hook<RadioOptions<"input">>;
+/**
+ * Renders a radio button element.
+ * @see https://ariakit.org/components/radio
+ * @example
+ * ```jsx
+ * const radio = useRadioStore();
+ * <RadioGroup store={radio}>
+ *   <Radio value="Apple" />
+ *   <Radio value="Orange" />
+ * </RadioGroup>
+ * ```
+ */
+export declare const Radio: import("../utils/types.js").Component<RadioOptions<"input">>;
+export interface RadioOptions<T extends As = "input"> extends CompositeItemOptions<T> {
+    /**
+     * Object returned by the `useRadioStore` hook. If not provided, the parent
+     * `RadioGroup` component's context will be used.
+     */
+    store?: RadioStore;
+    /**
+     * The value of the radio button.
+     */
+    value: string | number;
+    /**
+     * Whether the radio button is checked.
+     */
+    checked?: boolean;
+    /**
+     * Callback function that is called when the radio button store changes.
+     */
+    onChange?: BivariantCallback<(event: SyntheticEvent<HTMLInputElement>) => void>;
+}
+export type RadioProps<T extends As = "input"> = Props<RadioOptions<T>>;

package/esm/radio/radio.js

@@ -0,0 +1,20 @@
+import {
+  Radio,
+  useRadio
+} from "../__chunks/TUP5WTZZ.js";
+import "../__chunks/6I2PARRP.js";
+import "../__chunks/WHN4PCW7.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  Radio,
+  useRadio
+};

package/esm/role/role.d.ts

@@ -0,0 +1,24 @@
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `Role` component.
+ * @see https://ariakit.org/components/role
+ * @example
+ * ```jsx
+ * const props = useRole();
+ * <Role {...props} />
+ * ```
+ */
+export declare const useRole: import("../utils/types.js").Hook<RoleOptions<"div">>;
+/**
+ * Renders an abstract element that supports the `as` prop, `children` as a
+ * function and a `wrapElement` prop that can be used to wrap the underlying
+ * element with React Portal, Context or other component types.
+ * @see https://ariakit.org/components/role
+ * @example
+ * ```jsx
+ * <Role as="div" />
+ * ```
+ */
+export declare const Role: import("../utils/types.js").Component<RoleOptions<"div">>;
+export type RoleOptions<T extends As = "div"> = Options<T>;
+export type RoleProps<T extends As = "div"> = Props<RoleOptions<T>>;

package/esm/role/role.js

@@ -0,0 +1,20 @@
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+
+// src/role/role.ts
+var useRole = createHook((props) => {
+  return props;
+});
+var Role = createComponent((props) => {
+  return createElement("div", props);
+});
+if (process.env.NODE_ENV !== "production") {
+  Role.displayName = "Role";
+}
+export {
+  Role,
+  useRole
+};

package/esm/select/select-arrow.d.ts

@@ -0,0 +1,47 @@
+import type { PopoverDisclosureArrowOptions } from "../popover/popover-disclosure-arrow.js";
+import type { As, Props } from "../utils/types.js";
+import type { SelectStore } from "./select-store.js";
+/**
+ * Returns props to create a `SelectArrow` component.
+ * @see https://ariakit.org/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectArrow({ store });
+ * <Select store={store}>
+ *   {store.value}
+ *   <Role {...props} />
+ * </Select>
+ * <SelectPopover store={store}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </SelectPopover>
+ * ```
+ */
+export declare const useSelectArrow: import("../utils/types.js").Hook<SelectArrowOptions<"span">>;
+/**
+ * Renders an arrow pointing to the select popover position. It's usually
+ * rendered inside the `Select` component.
+ * @see https://ariakit.org/components/select
+ * @example
+ * ```jsx
+ * const select = useSelectStore();
+ * <Select store={select}>
+ *   {select.value}
+ *   <SelectArrow />
+ * </Select>
+ * <SelectPopover store={select}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </SelectPopover>
+ * ```
+ */
+export declare const SelectArrow: import("../utils/types.js").Component<SelectArrowOptions<"span">>;
+export interface SelectArrowOptions<T extends As = "span"> extends PopoverDisclosureArrowOptions<T> {
+    /**
+     * Object returned by the `useSelectStore` hook. If not provided, the parent
+     * `Select` component's context will be used.
+     */
+    store?: SelectStore;
+}
+export type SelectArrowProps<T extends As = "span"> = Props<SelectArrowOptions<T>>;

package/esm/select/select-arrow.js

@@ -0,0 +1,11 @@
+import {
+  SelectArrow,
+  useSelectArrow
+} from "../__chunks/A2DUDEP2.js";
+import "../__chunks/KHFKAEA6.js";
+import "../__chunks/6GS36SYX.js";
+import "../__chunks/JE5NWDDX.js";
+export {
+  SelectArrow,
+  useSelectArrow
+};

package/esm/select/select-context.d.ts

@@ -0,0 +1,3 @@
+import type { SelectStore } from "./select-store.js";
+export declare const SelectItemCheckedContext: import("react").Context<boolean>;
+export declare const SelectContext: import("react").Context<SelectStore | undefined>;

package/esm/select/select-context.js

@@ -0,0 +1,8 @@
+import {
+  SelectContext,
+  SelectItemCheckedContext
+} from "../__chunks/EEVSGAZW.js";
+export {
+  SelectContext,
+  SelectItemCheckedContext
+};

package/esm/select/select-group-label.d.ts

@@ -0,0 +1,48 @@
+import type { CompositeGroupLabelOptions } from "../composite/composite-group-label.js";
+import type { As, Props } from "../utils/types.js";
+import type { SelectStore } from "./select-store.js";
+/**
+ * Returns props to create a `SelectGroupLabel` component. This hook must be
+ * used in a component that's wrapped with `SelectGroup` so the
+ * `aria-labelledby` prop is properly set on the select group element.
+ * @see https://ariakit.org/components/select
+ * @example
+ * ```jsx
+ * // This component must be wrapped with SelectGroup
+ * const props = useSelectGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+export declare const useSelectGroupLabel: import("../utils/types.js").Hook<SelectGroupLabelOptions<"div">>;
+/**
+ * Renders a label in a select group. This component must be wrapped with
+ * `SelectGroup` so the `aria-labelledby` prop is properly set on the select
+ * group element.
+ * @see https://ariakit.org/components/select
+ * @example
+ * ```jsx
+ * const select = useSelectStore();
+ * <Select store={select} />
+ * <SelectPopover store={select}>
+ *   <SelectGroup>
+ *     <SelectGroupLabel>Fruits</SelectGroupLabel>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectGroup>
+ *   <SelectGroup>
+ *     <SelectGroupLabel>Meat</SelectGroupLabel>
+ *     <SelectItem value="Beef" />
+ *     <SelectItem value="Chicken" />
+ *   </SelectGroup>
+ * </SelectPopover>
+ * ```
+ */
+export declare const SelectGroupLabel: import("../utils/types.js").Component<SelectGroupLabelOptions<"div">>;
+export interface SelectGroupLabelOptions<T extends As = "div"> extends CompositeGroupLabelOptions<T> {
+    /**
+     * Object returned by the `useSelectStore` hook. If not provided, the parent
+     * `SelectList` or `SelectPopover` components' context will be used.
+     */
+    store?: SelectStore;
+}
+export type SelectGroupLabelProps<T extends As = "div"> = Props<SelectGroupLabelOptions<T>>;

package/esm/select/select-group-label.js

@@ -0,0 +1,33 @@
+import {
+  useCompositeGroupLabel
+} from "../__chunks/NYJYNUSY.js";
+import "../__chunks/SE7IFIBU.js";
+import "../__chunks/F5VAC7MB.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/select/select-group-label.ts
+var useSelectGroupLabel = createHook(
+  (props) => {
+    props = useCompositeGroupLabel(props);
+    return props;
+  }
+);
+var SelectGroupLabel = createComponent(
+  (props) => {
+    const htmlProps = useSelectGroupLabel(props);
+    return createElement("div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  SelectGroupLabel.displayName = "SelectGroupLabel";
+}
+export {
+  SelectGroupLabel,
+  useSelectGroupLabel
+};