@ariakit/solid-core 0.0.1 → 0.1.1

package/esm/__chunks/QKOHDUFI.js

@@ -0,0 +1,42 @@
+// src/utils/reactivity.ts
+import { combineProps } from "@solid-primitives/props";
+import {
+  createSignal,
+  mergeProps as solidMergeProps,
+  splitProps,
+  untrack
+} from "solid-js";
+function stableAccessor(value, callback) {
+  return () => callback(value);
+}
+function extractPropsWithDefaults(props, defaults) {
+  const [own, rest] = splitProps(props, Object.keys(defaults));
+  return [
+    solidMergeProps(defaults, own),
+    rest
+  ];
+}
+function createRef(initialValue) {
+  const [get, set] = createSignal(initialValue);
+  return {
+    get current() {
+      return untrack(() => get());
+    },
+    get,
+    set,
+    reset: () => set(initialValue)
+  };
+}
+function mergeProps(base, overrides, skipProps) {
+  return combineProps(
+    [base, skipProps ? splitProps(overrides, skipProps)[1] : overrides],
+    { reverseEventHandlers: true }
+  );
+}
+
+export {
+  stableAccessor,
+  extractPropsWithDefaults,
+  createRef,
+  mergeProps
+};

package/esm/__chunks/SFKMELHD.js

@@ -0,0 +1,35 @@
+import {
+  createHook,
+  createInstance
+} from "./OKOFCLOZ.js";
+import {
+  mergeProps
+} from "./QKOHDUFI.js";
+
+// src/visually-hidden/visually-hidden.tsx
+var TagName = "span";
+var useVisuallyHidden = createHook(function useVisuallyHidden2(props) {
+  props = mergeProps({
+    style: {
+      border: 0,
+      clip: "rect(0 0 0 0)",
+      height: "1px",
+      margin: "-1px",
+      overflow: "hidden",
+      padding: 0,
+      position: "absolute",
+      "white-space": "nowrap",
+      width: "1px"
+    }
+  }, props);
+  return props;
+});
+function VisuallyHidden(props) {
+  const htmlProps = useVisuallyHidden(props);
+  return createInstance(TagName, htmlProps);
+}
+
+export {
+  useVisuallyHidden,
+  VisuallyHidden
+};

package/esm/__chunks/UKDBTPK5.js

@@ -0,0 +1,21 @@
+// src/utils/misc.ts
+import { access } from "@solid-primitives/utils";
+import { createUniqueId } from "solid-js";
+function createId(defaultId) {
+  const id = createUniqueId();
+  return () => {
+    var _a;
+    return (_a = access(defaultId)) != null ? _a : id;
+  };
+}
+function extractTagName(element, fallback) {
+  return () => {
+    var _a, _b;
+    return (_b = (_a = access(element)) == null ? void 0 : _a.tagName.toLowerCase()) != null ? _b : typeof fallback === "string" ? fallback : void 0;
+  };
+}
+
+export {
+  createId,
+  extractTagName
+};

package/esm/__chunks/VOWRNGOM.js

@@ -0,0 +1,7 @@
+// src/group/group-label-context.tsx
+import { createContext } from "solid-js";
+var GroupLabelContext = createContext();
+
+export {
+  GroupLabelContext
+};

package/esm/as/as.d.ts

@@ -0,0 +1,30 @@
+import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
+type AsElements = {
+    [K in keyof JSX.IntrinsicElements]: Component<ComponentProps<K>>;
+};
+type AsComponent = <T extends Component<any>, P = ComponentProps<T>>(props: AsProps<T, P>) => JSX.Element;
+/**
+ * Allows a component to be rendered as a different HTML element or Solid
+ * component. Must be passed to the `render` prop of a component that
+ * supports it.
+ *
+ * To render as an HTML element, use `<As.element />` (e.g. `<As.button />`).
+ *
+ * To render as a component, use `<As component={Component} />` (e.g. `<As
+ * component={MyButton} />`).
+ *
+ * Check out the [Composition](https://solid.ariakit.org/guide/composition)
+ * guide for more details.
+ * @example
+ * ```jsx
+ * <Role render={<As component={MyButton} variant="primary" />} />
+ * <Role render={<As.button type="button" />} />
+ * ```
+ */
+export declare const As: AsComponent & AsElements;
+export type AsProps<T extends ValidComponent, P = ComponentProps<T>> = {
+    [K in keyof P]: P[K];
+} & {
+    component: T;
+};
+export {};

package/esm/as/as.js

@@ -0,0 +1,7 @@
+import {
+  As
+} from "../__chunks/NX66AMGW.js";
+import "../__chunks/QKOHDUFI.js";
+export {
+  As
+};

package/esm/focus-trap/focus-trap-region.d.ts

@@ -0,0 +1,38 @@
+import { type ValidComponent } from "solid-js";
+import type { Options, Props } from "../utils/types.ts";
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FocusTrapRegion` component.
+ * @see https://solid.ariakit.org/components/focus-trap-region
+ * @example
+ * ```jsx
+ * const props = useFocusTrapRegion();
+ * <Role {...props} />
+ * ```
+ */
+export declare const useFocusTrapRegion: import("../utils/types.ts").Hook<"div", FocusTrapRegionOptions<"div">>;
+/**
+ * Renders a wrapper element that traps the focus inside it when the
+ * [`enabled`](https://solid.ariakit.org/reference/focus-trap-region#enabled)
+ * prop is `true`.
+ * @see https://solid.ariakit.org/components/focus-trap
+ * @example
+ * ```jsx
+ * <FocusTrapRegion>
+ *  <Button>click me</Button>
+ *  <Button>trap focus</Button>
+ *  <Button disabled>disabled Button</Button>
+ * </FocusTrapRegion>
+ * ```
+ */
+export declare const FocusTrapRegion: (props: FocusTrapRegionProps) => import("solid-js").JSX.Element;
+export interface FocusTrapRegionOptions<_T extends ValidComponent = TagName> extends Options {
+    /**
+     * If true, it will trap the focus in the region.
+     * @default false
+     */
+    enabled?: boolean;
+}
+export type FocusTrapRegionProps<T extends ValidComponent = TagName> = Props<T, FocusTrapRegionOptions<T>>;
+export {};

package/esm/focus-trap/focus-trap-region.js

@@ -0,0 +1,68 @@
+import {
+  FocusTrap
+} from "../__chunks/ILGMKAYU.js";
+import "../__chunks/SFKMELHD.js";
+import {
+  createHook,
+  createInstance,
+  withOptions,
+  wrapInstance
+} from "../__chunks/OKOFCLOZ.js";
+import {
+  createRef,
+  mergeProps
+} from "../__chunks/QKOHDUFI.js";
+
+// src/focus-trap/focus-trap-region.tsx
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { getAllTabbableIn } from "@ariakit/core/utils/focus";
+import { Show } from "solid-js";
+var TagName = "div";
+var useFocusTrapRegion = createHook(withOptions({
+  enabled: false
+}, function useFocusTrapRegion2(props, options) {
+  const ref = createRef();
+  props = wrapInstance(props, (wrapperProps) => {
+    const renderFocusTrap = () => {
+      return _$createComponent(Show, {
+        get when() {
+          return options.enabled;
+        },
+        get children() {
+          return _$createComponent(FocusTrap, {
+            onFocus: (event) => {
+              const container = ref.current;
+              if (!container) return;
+              const tabbables = getAllTabbableIn(container, true);
+              const first = tabbables[0];
+              const last = tabbables[tabbables.length - 1];
+              if (!tabbables.length) {
+                container.focus();
+                return;
+              }
+              if (event.relatedTarget === first) {
+                last == null ? void 0 : last.focus();
+              } else {
+                first == null ? void 0 : first.focus();
+              }
+            }
+          });
+        }
+      });
+    };
+    return [_$memo(renderFocusTrap), _$memo(() => wrapperProps.children), _$memo(renderFocusTrap)];
+  });
+  props = mergeProps({
+    ref: ref.set
+  }, props);
+  return props;
+}));
+var FocusTrapRegion = function FocusTrapRegion2(props) {
+  const htmlProps = useFocusTrapRegion(props);
+  return createInstance(TagName, htmlProps);
+};
+export {
+  FocusTrapRegion,
+  useFocusTrapRegion
+};

package/esm/focus-trap/focus-trap.d.ts

@@ -0,0 +1,27 @@
+import type { ValidComponent } from "solid-js";
+import type { Props } from "../utils/types.ts";
+import type { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.tsx";
+declare const TagName = "span";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FocusTrap` component.
+ * @see https://solid.ariakit.org/components/focus-trap
+ * @example
+ * ```jsx
+ * const props = useFocusTrap();
+ * <Role {...props} />
+ * ```
+ */
+export declare const useFocusTrap: import("../utils/types.ts").Hook<"span", FocusTrapOptions<"span">>;
+/**
+ * Renders a focus trap element.
+ * @see https://solid.ariakit.org/components/focus-trap
+ * @example
+ * ```jsx
+ * <FocusTrap onFocus={focusSomethingElse} />
+ * ```
+ */
+export declare function FocusTrap(props: FocusTrapProps): import("solid-js").JSX.Element;
+export type FocusTrapOptions<T extends ValidComponent = TagName> = VisuallyHiddenOptions<T>;
+export type FocusTrapProps<T extends ValidComponent = TagName> = Props<T, FocusTrapOptions<T>>;
+export {};

package/esm/focus-trap/focus-trap.js

@@ -0,0 +1,11 @@
+import {
+  FocusTrap,
+  useFocusTrap
+} from "../__chunks/ILGMKAYU.js";
+import "../__chunks/SFKMELHD.js";
+import "../__chunks/OKOFCLOZ.js";
+import "../__chunks/QKOHDUFI.js";
+export {
+  FocusTrap,
+  useFocusTrap
+};

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

@@ -0,0 +1,2 @@
+import { type Setter } from "solid-js";
+export declare const GroupLabelContext: import("solid-js").Context<Setter<string | undefined> | undefined>;

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

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

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

@@ -0,0 +1,34 @@
+import { type ValidComponent } from "solid-js";
+import type { Options, Props } from "../utils/types.ts";
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `GroupLabel` component. This hook must be used in a
+ * component that's wrapped with `Group` so the `aria-labelledby` prop is
+ * properly set on the group element.
+ * @see https://solid.ariakit.org/components/group
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Group
+ * const props = useGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+export declare const useGroupLabel: import("../utils/types.ts").Hook<"div", GroupLabelOptions<"div">>;
+/**
+ * Renders a label in a group. This component should be wrapped with a
+ * [`Group`](https://solid.ariakit.org/reference/group) so the `aria-labelledby`
+ * prop is correctly set on the group element.
+ * @see https://solid.ariakit.org/components/group
+ * @example
+ * ```jsx
+ * <Group>
+ *   <GroupLabel>Label</GroupLabel>
+ * </Group>
+ * ```
+ */
+export declare const GroupLabel: (props: GroupLabelProps) => import("solid-js").JSX.Element;
+export interface GroupLabelOptions<_T extends ValidComponent = TagName> extends Options {
+}
+export type GroupLabelProps<T extends ValidComponent = TagName> = Props<T, GroupLabelOptions<T>>;
+export {};

package/esm/group/group-label.js

@@ -0,0 +1,41 @@
+import {
+  createId
+} from "../__chunks/UKDBTPK5.js";
+import {
+  createHook,
+  createInstance
+} from "../__chunks/OKOFCLOZ.js";
+import {
+  mergeProps,
+  stableAccessor
+} from "../__chunks/QKOHDUFI.js";
+import {
+  GroupLabelContext
+} from "../__chunks/VOWRNGOM.js";
+
+// src/group/group-label.tsx
+import { createEffect, onCleanup, useContext } from "solid-js";
+var TagName = "div";
+var useGroupLabel = createHook(function useGroupLabel2(props) {
+  const setLabelId = useContext(GroupLabelContext);
+  const id = createId(stableAccessor(props, (p) => p.id));
+  createEffect(() => {
+    setLabelId == null ? void 0 : setLabelId(id());
+    onCleanup(() => setLabelId == null ? void 0 : setLabelId(void 0));
+  });
+  props = mergeProps({
+    get id() {
+      return id();
+    },
+    "aria-hidden": true
+  }, props);
+  return props;
+});
+var GroupLabel = function GroupLabel2(props) {
+  const htmlProps = useGroupLabel(props);
+  return createInstance(TagName, htmlProps);
+};
+export {
+  GroupLabel,
+  useGroupLabel
+};

package/esm/group/group.d.ts

@@ -0,0 +1,28 @@
+import { type ValidComponent } from "solid-js";
+import type { Options, Props } from "../utils/types.ts";
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Group` component.
+ * @see https://solid.ariakit.org/components/group
+ * @example
+ * ```jsx
+ * const props = useGroup();
+ * <Role {...props}>Group</Role>
+ * ```
+ */
+export declare const useGroup: import("../utils/types.ts").Hook<"div", Options>;
+/**
+ * Renders a group element. Optionally, a
+ * [`GroupLabel`](https://solid.ariakit.org/reference/group-label) can be rendered as
+ * a child to provide a label for the group.
+ * @see https://solid.ariakit.org/components/group
+ * @example
+ * ```jsx
+ * <Group>Group</Group>
+ * ```
+ */
+export declare const Group: (props: GroupProps) => import("solid-js").JSX.Element;
+export type GroupOptions<_T extends ValidComponent = TagName> = Options;
+export type GroupProps<T extends ValidComponent = TagName> = Props<T, GroupOptions<T>>;
+export {};

package/esm/group/group.js

@@ -0,0 +1,43 @@
+import {
+  As
+} from "../__chunks/NX66AMGW.js";
+import {
+  createHook,
+  createInstance,
+  wrapInstance
+} from "../__chunks/OKOFCLOZ.js";
+import {
+  mergeProps
+} from "../__chunks/QKOHDUFI.js";
+import {
+  GroupLabelContext
+} from "../__chunks/VOWRNGOM.js";
+
+// src/group/group.tsx
+import { createComponent as _$createComponent } from "solid-js/web";
+import { createSignal } from "solid-js";
+var TagName = "div";
+var useGroup = createHook(function useGroup2(props) {
+  const [labelId, setLabelId] = createSignal();
+  props = wrapInstance(props, _$createComponent(As, {
+    get component() {
+      return GroupLabelContext.Provider;
+    },
+    value: setLabelId
+  }));
+  props = mergeProps({
+    role: "group",
+    get "aria-labelledby"() {
+      return labelId();
+    }
+  }, props);
+  return props;
+});
+var Group = function Group2(props) {
+  const htmlProps = useGroup(props);
+  return createInstance(TagName, htmlProps);
+};
+export {
+  Group,
+  useGroup
+};

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

@@ -0,0 +1,3 @@
+import { type Accessor } from "solid-js";
+import type { HeadingLevels } from "./utils.ts";
+export declare const HeadingContext: import("solid-js").Context<Accessor<HeadingLevels> | undefined>;

package/esm/heading/heading-context.js

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

package/esm/heading/heading-level.d.ts

@@ -0,0 +1,27 @@
+import { type JSX } from "solid-js";
+import type { HeadingLevels } from "./utils.ts";
+/**
+ * A component that sets the heading level for its children. It doesn't render
+ * any HTML element, just sets the
+ * [`level`](https://solid.ariakit.org/reference/heading-level#level) prop on the
+ * context.
+ * @see https://solid.ariakit.org/components/heading
+ * @example
+ * ```jsx
+ * <HeadingLevel>
+ *   <Heading>Heading 1</Heading>
+ *   <HeadingLevel>
+ *     <Heading>Heading 2</Heading>
+ *   </HeadingLevel>
+ * </HeadingLevel>
+ * ```
+ */
+export declare function HeadingLevel(props: HeadingLevelProps): JSX.Element;
+export interface HeadingLevelProps {
+    /**
+     * The heading level. By default, it'll increase the level by 1 based on the
+     * context.
+     */
+    level?: HeadingLevels;
+    children?: JSX.Element;
+}

package/esm/heading/heading-level.js

@@ -0,0 +1,23 @@
+import {
+  HeadingContext
+} from "../__chunks/I7JSIDPD.js";
+
+// src/heading/heading-level.tsx
+import { createComponent as _$createComponent } from "solid-js/web";
+import { useContext } from "solid-js";
+function HeadingLevel(props) {
+  const contextLevel = useContext(HeadingContext);
+  const nextLevel = () => {
+    var _a;
+    return Math.max(Math.min(props.level || ((_a = contextLevel == null ? void 0 : contextLevel()) != null ? _a : 0) + 1, 6), 1);
+  };
+  return _$createComponent(HeadingContext.Provider, {
+    value: nextLevel,
+    get children() {
+      return props.children;
+    }
+  });
+}
+export {
+  HeadingLevel
+};

package/esm/heading/heading.d.ts

@@ -0,0 +1,39 @@
+import { type ValidComponent } from "solid-js";
+import type { Options, Props } from "../utils/types.ts";
+import type { HeadingLevels } from "./utils.ts";
+type HeadingElements = `h${HeadingLevels}`;
+declare const TagName = "h1";
+type TagName = HeadingElements;
+/**
+ * Returns props to create a `Heading` component. The element type (or the
+ * `aria-level` prop, if the element type is not a native heading) is determined
+ * by the context level provided by the parent `HeadingLevel` component.
+ * @see https://solid.ariakit.org/components/heading
+ * @example
+ * ```jsx
+ * const props = useHeading();
+ * <Role {...props}>Heading</Role>
+ * ```
+ */
+export declare const useHeading: import("../utils/types.ts").Hook<"h1" | "h2" | "h3" | "h4" | "h5" | "h6", HeadingOptions<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">>;
+/**
+ * Renders a heading element. The element type (or the `aria-level` attribute,
+ * if the element type is not a native heading) is determined by the context
+ * level provided by the closest
+ * [`HeadingLevel`](https://solid.ariakit.org/reference/heading-level) ancestor.
+ * @see https://solid.ariakit.org/components/heading
+ * @example
+ * ```jsx
+ * <HeadingLevel>
+ *   <Heading>Heading 1</Heading>
+ *   <HeadingLevel>
+ *     <Heading>Heading 2</Heading>
+ *   </HeadingLevel>
+ * </HeadingLevel>
+ * ```
+ */
+export declare const Heading: (props: HeadingProps) => import("solid-js").JSX.Element;
+export interface HeadingOptions<_T extends ValidComponent = TagName> extends Options {
+}
+export type HeadingProps<T extends ValidComponent = TagName> = Props<T, HeadingOptions<T>>;
+export {};

package/esm/heading/heading.js

@@ -0,0 +1,45 @@
+import {
+  extractTagName
+} from "../__chunks/UKDBTPK5.js";
+import {
+  createHook,
+  createInstance
+} from "../__chunks/OKOFCLOZ.js";
+import {
+  createRef,
+  mergeProps
+} from "../__chunks/QKOHDUFI.js";
+import {
+  HeadingContext
+} from "../__chunks/I7JSIDPD.js";
+
+// src/heading/heading.tsx
+import { createMemo, useContext } from "solid-js";
+var TagName = "h1";
+var useHeading = createHook(function useHeading2(props) {
+  const ref = createRef();
+  const level = useContext(HeadingContext) || (() => 1);
+  const Element = () => `h${level()}`;
+  const tagName = extractTagName(ref.get);
+  const isNativeHeading = createMemo(() => !!tagName() && /^h\d$/.test(tagName()));
+  props = mergeProps({
+    // TODO: replace with LazyDynamic
+    render: Element(),
+    get role() {
+      return !isNativeHeading() ? "heading" : void 0;
+    },
+    get "aria-level"() {
+      return !isNativeHeading() ? level() : void 0;
+    },
+    ref: ref.set
+  }, props);
+  return props;
+});
+var Heading = function Heading2(props) {
+  const htmlProps = useHeading(props);
+  return createInstance(TagName, htmlProps);
+};
+export {
+  Heading,
+  useHeading
+};

package/esm/heading/utils.d.ts

@@ -0,0 +1 @@
+export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;

package/esm/role/role.d.ts

@@ -0,0 +1,33 @@
+import type { Component, ValidComponent } from "solid-js";
+import type { Options, Props } from "../utils/types.ts";
+declare const TagName = "div";
+type TagName = typeof TagName;
+export declare const elements: readonly ["a", "button", "details", "dialog", "div", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "img", "input", "label", "li", "nav", "ol", "p", "section", "select", "span", "summary", "textarea", "ul", "svg"];
+type RoleElements = {
+    [K in (typeof elements)[number]]: Component<RoleProps<K>>;
+};
+/**
+ * Returns props to create a `Role` component.
+ * @see https://solid.ariakit.org/components/role
+ * @example
+ * ```jsx
+ * const props = useRole();
+ * <Role {...props} />
+ * ```
+ */
+export declare const useRole: import("../utils/types.ts").Hook<"div", RoleOptions<"div">>;
+/**
+ * Renders an abstract element that supports the `render` prop and a
+ * `wrapInstance` prop that can be used to wrap the underlying component
+ * instance with Solid Portal, Context or other component types.
+ * @see https://solid.ariakit.org/components/role
+ * @example
+ * ```jsx
+ * <Role render={<As.div />} />
+ * ```
+ */
+export declare const Role: Component<RoleProps> & RoleElements;
+export interface RoleOptions<_T extends ValidComponent = TagName> extends Options {
+}
+export type RoleProps<T extends ValidComponent = TagName> = Props<T, RoleOptions>;
+export {};