@ariakit/solid-core 0.0.1 → 0.1.0

package/esm/role/role.js

@@ -0,0 +1,26 @@
+import {
+  createHook,
+  createInstance
+} from "../__chunks/OKOFCLOZ.js";
+import "../__chunks/QKOHDUFI.js";
+
+// src/role/role.tsx
+var TagName = "div";
+var elements = ["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"];
+var useRole = createHook(function useRole2(props) {
+  return props;
+});
+var Role = function Role2(props) {
+  return createInstance(TagName, props);
+};
+Object.assign(Role, elements.reduce((acc, element) => {
+  acc[element] = function Role3(props) {
+    return createInstance(element, props);
+  };
+  return acc;
+}, {}));
+export {
+  Role,
+  elements,
+  useRole
+};

package/esm/separator/separator.d.ts

@@ -0,0 +1,32 @@
+import type { ValidComponent } from "solid-js";
+import type { Options, Props } from "../utils/types.ts";
+declare const TagName = "hr";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Separator` component.
+ * @see https://solid.ariakit.org/components/separator
+ * @example
+ * ```jsx
+ * const props = useSeparator({ orientation: "horizontal" });
+ * <Role {...props} />
+ * ```
+ */
+export declare const useSeparator: import("../utils/types.ts").Hook<"hr", SeparatorOptions<"hr">>;
+/**
+ * Renders a separator element.
+ * @see https://solid.ariakit.org/components/separator
+ * @example
+ * ```jsx
+ * <Separator orientation="horizontal" />
+ * ```
+ */
+export declare const Separator: (props: SeparatorProps) => import("solid-js").JSX.Element;
+export interface SeparatorOptions<_T extends ValidComponent = TagName> extends Options {
+    /**
+     * The orientation of the separator.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+}
+export type SeparatorProps<T extends ValidComponent = TagName> = Props<T, SeparatorOptions<T>>;
+export {};

package/esm/separator/separator.js

@@ -0,0 +1,30 @@
+import {
+  createHook,
+  createInstance,
+  withOptions
+} from "../__chunks/OKOFCLOZ.js";
+import {
+  mergeProps
+} from "../__chunks/QKOHDUFI.js";
+
+// src/separator/separator.tsx
+var TagName = "hr";
+var useSeparator = createHook(withOptions({
+  orientation: "horizontal"
+}, function useSeparator2(props, options) {
+  props = mergeProps({
+    role: "separator",
+    get "aria-orientation"() {
+      return options.orientation;
+    }
+  }, props);
+  return props;
+}));
+var Separator = function Separator2(props) {
+  const htmlProps = useSeparator(props);
+  return createInstance(TagName, htmlProps);
+};
+export {
+  Separator,
+  useSeparator
+};

package/esm/utils/misc.d.ts

@@ -0,0 +1,16 @@
+import { type MaybeAccessor } from "@solid-primitives/utils";
+import { type Accessor, type ValidComponent } from "solid-js";
+/**
+ * Generates a unique ID.
+ */
+export declare function createId(defaultId?: MaybeAccessor<string | undefined>): Accessor<string>;
+/**
+ * Returns the tag name by parsing an element.
+ * @example
+ * function Component(props) {
+ *   const [ref, setRef] = createSignal();
+ *   const tagName = extractTagName(ref, "button"); // () => "div"
+ *   return <div ref={setRef} {...props} />;
+ * }
+ */
+export declare function extractTagName(element?: MaybeAccessor<HTMLElement | undefined>, fallback?: ValidComponent): () => string | undefined;

package/esm/utils/misc.js

@@ -0,0 +1,8 @@
+import {
+  createId,
+  extractTagName
+} from "../__chunks/UKDBTPK5.js";
+export {
+  createId,
+  extractTagName
+};

package/esm/utils/reactivity.d.ts

@@ -0,0 +1,109 @@
+import type { AnyObject } from "@ariakit/core/utils/types";
+import { type Accessor, type JSX, type Setter } from "solid-js";
+/**
+ * Creates a stable accessor. Useful when creating derived accessors that
+ * depend on a mutable variable that may change later.
+ * @example
+ * let value = 0;
+ * const accessor = stableAccessor(value, (v) => v + 1);
+ * value = 100;
+ * accessor(); // 1
+ */
+export declare function stableAccessor<T, U>(value: T, callback: (value: T) => U): () => U;
+type NullablyRequired<T> = {
+    [P in keyof T & keyof any]: T[P];
+};
+export type ExtractPropsWithDefaultsExtractedProps<P, D extends Partial<R>, R = NullablyRequired<P>> = {
+    -readonly [K in keyof R as Extract<K, keyof D>]: D[K] extends undefined ? R[K] : Exclude<R[K], undefined>;
+};
+export type ExtractPropsWithDefaultsRestProps<P, D extends Partial<P>> = Omit<P, keyof D>;
+export type ExtractPropsWithDefaultsReturn<P, D extends Partial<P>> = [
+    ExtractPropsWithDefaultsExtractedProps<P, D>,
+    ExtractPropsWithDefaultsRestProps<P, D>
+];
+/**
+ * Extracts props from a props object and applies defaults to them. The
+ * return value is a tuple of the extracted props and the rest of the props.
+ *
+ * To extract a prop without a default, set it to `undefined`.
+ * @example
+ * const [extractedProps, restProps] = extractPropsWithDefaults(
+ *   props,
+ *   { orientation: "horizontal" },
+ * );
+ */
+export declare function extractPropsWithDefaults<P extends AnyObject, const D extends Partial<P>>(props: P, defaults: D): ExtractPropsWithDefaultsReturn<P, D>;
+/**
+ * A ref object that contains the value getter (`value`) and setter (`set`) as
+ * properties for convenience. It also has a `reset` method that can be used to
+ * set the value to the initial value that was passed, which is `undefined` by
+ * default. The `current` getter can be used to obtain the value without
+ * tracking it reactively.
+ *
+ * Created by the `createRef` function.
+ * @example
+ * const ref = createRef();
+ * createEffect(() => {
+ *   console.log(ref.value);
+ * });
+ * ref.set(buttonElement);
+ * ref.reset();
+ */
+export type RefStore<T> = {
+    /**
+     * The current value of the ref. It is a non-reactive getter, wrapped with
+     * the `untrack` function.
+     *
+     * **Important note**: since this is a getter, TypeScript might reflect the
+     * wrong type in some cases. For example:
+     *
+     * ```ts
+     * const ref = createRef<number>(); // ref.current type: number | undefined
+     * ref.set(1);
+     * console.log(ref.current); // 1
+     * if (ref.current) {
+     *   // ref.current type: number (narrowed by the if statement)
+     *   console.log(ref.current); // 1
+     *   ref.set(undefined);
+     *   // ref.current type: number (wrong!)
+     *   console.log(ref.current); // undefined
+     * }
+     * ```
+     */
+    current: T;
+    /**
+     * The getter function for the ref.
+     */
+    get: Accessor<T>;
+    /**
+     * The setter function for the ref.
+     */
+    set: Setter<T>;
+    /**
+     * Resets the ref to the initial value that was passed, which is `undefined`
+     * by default.
+     */
+    reset: () => void;
+};
+/**
+ * Creates a ref object that contains the value getter (`value`) and setter
+ * (`set`) as properties for convenience. It also has a `reset` method that
+ * can be used to set the value to the initial value that was passed,
+ * which is `undefined` by default. The `current` getter can be used to obtain
+ * the value without tracking it reactively.
+ * @example
+ * ```jsx
+ * const ref = createRef();
+ * createEffect(() => {
+ *   console.log(ref.value);
+ * });
+ * <button ref={ref.set}>Button</button>
+ * ```
+ */
+export declare function createRef<T>(): RefStore<T | undefined>;
+export declare function createRef<T>(initialValue: T): RefStore<T>;
+/**
+ * Merges two sets of props.
+ */
+export declare function mergeProps<T extends JSX.HTMLAttributes<any>>(base: T, overrides: T, skipProps?: Array<keyof T>): T;
+export {};

package/esm/utils/reactivity.js

@@ -0,0 +1,12 @@
+import {
+  createRef,
+  extractPropsWithDefaults,
+  mergeProps,
+  stableAccessor
+} from "../__chunks/QKOHDUFI.js";
+export {
+  createRef,
+  extractPropsWithDefaults,
+  mergeProps,
+  stableAccessor
+};

package/esm/utils/system.d.ts

@@ -0,0 +1,45 @@
+import type { AnyObject, EmptyObject } from "@ariakit/core/utils/types";
+import { type ValidComponent } from "solid-js";
+import { type ExtractPropsWithDefaultsExtractedProps, type ExtractPropsWithDefaultsRestProps } from "./reactivity.ts";
+import type { HTMLProps, Hook, Options, Props, WrapInstance, WrapInstanceValue } from "./types.ts";
+/**
+ * Creates a Solid component instance that supports the `render` and
+ * `wrapInstance` props.
+ */
+export declare function createInstance(Component: ValidComponent, props: Props<ValidComponent, Options>): import("solid-js").JSX.Element;
+/**
+ * Returns props with an additional `wrapInstance` prop.
+ */
+export declare function wrapInstance<P, Q = P & {
+    wrapInstance: WrapInstance;
+}>(props: P & {
+    wrapInstance?: WrapInstance;
+}, element: WrapInstanceValue): Q;
+/**
+ * Creates a component hook that accepts props and returns props so they can be
+ * passed to a Solid component.
+ */
+export declare function createHook<T extends ValidComponent, P extends AnyObject = EmptyObject>(useProps: (props: Props<T, P>) => HTMLProps<T, P>): Hook<T, P>;
+/**
+ * Splits "option props" from the rest in a component hook. Must be called
+ * inside `createHook`.
+ *
+ * The first argument is an object that defines the props that will be extracted,
+ * with their default values. To extract a prop without a default, set it to
+ * `undefined`.
+ *
+ * The hook function must be passed as the second argument, and it will receive
+ * the rest of the props and the extracted options.
+ * @example
+ * ```jsx
+ * export const useMyComponent = createHook<TagName, MyComponentOptions>(
+ *   withOptions(
+ *     { orientation: "horizontal" },
+ *     function useMyComponent(props, options) {
+ *       // ...
+ *     },
+ *   ),
+ * );
+ * ```
+ */
+export declare function withOptions<T extends ValidComponent, P extends AnyObject, const D extends Partial<ComputedP>, ComputedP extends Props<T, P>>(defaults: D, useProps: (props: ExtractPropsWithDefaultsRestProps<ComputedP, D>, options: ExtractPropsWithDefaultsExtractedProps<ComputedP, D>) => HTMLProps<T, P>): (props: ComputedP) => HTMLProps<T, P>;

package/esm/utils/system.js

@@ -0,0 +1,13 @@
+import {
+  createHook,
+  createInstance,
+  withOptions,
+  wrapInstance
+} from "../__chunks/OKOFCLOZ.js";
+import "../__chunks/QKOHDUFI.js";
+export {
+  createHook,
+  createInstance,
+  withOptions,
+  wrapInstance
+};

package/esm/utils/types.d.ts

@@ -0,0 +1,56 @@
+import type { AnyObject, EmptyObject } from "@ariakit/core/utils/types";
+import type { Component, ComponentProps, JSX, ParentProps, ValidComponent } from "solid-js";
+/**
+ * A value that can be rendered when passed to the `render` prop or the
+ * `wrapInstance` prop.
+ */
+export type RenderValue<P extends AnyObject> = JSX.Element | Component<P>;
+/**
+ * A value passed to the `wrapInstance` prop.
+ */
+export type WrapInstanceValue = RenderValue<ParentProps>;
+/**
+ * The `wrapInstance` prop.
+ */
+export type WrapInstance = Array<WrapInstanceValue>;
+/**
+ * Custom props including the `render` prop.
+ */
+export interface Options {
+    wrapInstance?: WrapInstance;
+    /**
+     * Allows the component to be rendered as a different HTML element or Solid
+     * component. The value can be an `As` component instance or a function that
+     * takes in the original component props and gives back a Solid component
+     * instance with the props merged.
+     *
+     * Check out the [Composition](https://solid.ariakit.org/guide/composition) guide
+     * for more details.
+     */
+    render?: RenderValue<JSX.HTMLAttributes<any>>;
+}
+/**
+ * HTML props based on the element type, excluding custom props.
+ * @template T The element type.
+ * @template P Custom props.
+ * @example
+ * type ButtonHTMLProps = HTMLProps<"button", { custom?: boolean }>;
+ */
+export type HTMLProps<T extends ValidComponent, P extends AnyObject = EmptyObject> = Omit<ComponentProps<T>, keyof P> & {
+    [index: `data-${string}`]: unknown;
+};
+/**
+ * Props based on the element type, including custom props.
+ * @template T The element type.
+ * @template P Custom props.
+ */
+export type Props<T extends ValidComponent, P extends AnyObject = EmptyObject> = P & HTMLProps<T, P>;
+/**
+ * A component hook that supports the `render` prop and returns HTML props based
+ * on the element type.
+ * @template T The element type.
+ * @template P Custom props.
+ * @example
+ * type UseButton = Hook<"button", { custom?: boolean }>;
+ */
+export type Hook<T extends ValidComponent, P extends AnyObject = EmptyObject> = <ElementType extends ValidComponent = T>(props?: Props<ElementType, P>) => HTMLProps<ElementType, P>;

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

@@ -0,0 +1,34 @@
+import type { ValidComponent } from "solid-js";
+import type { Options, Props } from "../utils/types.ts";
+declare const TagName = "span";
+type TagName = typeof TagName;
+/**
+ * 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://solid.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.ts").Hook<"span", VisuallyHiddenOptions<"span">>;
+/**
+ * Renders an element that's visually hidden, but still accessible to screen
+ * readers.
+ * @see https://solid.ariakit.org/components/visually-hidden
+ * @example
+ * ```jsx
+ * <a href="#">
+ *   Learn more<VisuallyHidden> about the Solar System</VisuallyHidden>.
+ * </a>
+ * ```
+ */
+export declare function VisuallyHidden(props: VisuallyHiddenProps): import("solid-js").JSX.Element;
+export interface VisuallyHiddenOptions<_T extends ValidComponent = TagName> extends Options {
+}
+export type VisuallyHiddenProps = Props<TagName, VisuallyHiddenOptions>;
+export {};

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

@@ -0,0 +1,10 @@
+import {
+  VisuallyHidden,
+  useVisuallyHidden
+} from "../__chunks/SFKMELHD.js";
+import "../__chunks/OKOFCLOZ.js";
+import "../__chunks/QKOHDUFI.js";
+export {
+  VisuallyHidden,
+  useVisuallyHidden
+};

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

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/solid-core/focus-trap/focus-trap",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/focus-trap/focus-trap.cjs",
+  "module": "../../esm/focus-trap/focus-trap.js",
+  "types": "../../cjs/focus-trap/focus-trap.d.ts"
+}

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

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/solid-core/focus-trap/focus-trap-region",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/focus-trap/focus-trap-region.cjs",
+  "module": "../../esm/focus-trap/focus-trap-region.js",
+  "types": "../../cjs/focus-trap/focus-trap-region.d.ts"
+}

package/group/group/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/solid-core/group/group",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/group/group.cjs",
+  "module": "../../esm/group/group.js",
+  "types": "../../cjs/group/group.d.ts"
+}

package/group/group-label/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/solid-core/group/group-label",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/group/group-label.cjs",
+  "module": "../../esm/group/group-label.js",
+  "types": "../../cjs/group/group-label.d.ts"
+}

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

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/solid-core/group/group-label-context",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/group/group-label-context.cjs",
+  "module": "../../esm/group/group-label-context.js",
+  "types": "../../cjs/group/group-label-context.d.ts"
+}

package/heading/heading/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/solid-core/heading/heading",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/heading/heading.cjs",
+  "module": "../../esm/heading/heading.js",
+  "types": "../../cjs/heading/heading.d.ts"
+}

package/heading/heading-context/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/solid-core/heading/heading-context",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/heading/heading-context.cjs",
+  "module": "../../esm/heading/heading-context.js",
+  "types": "../../cjs/heading/heading-context.d.ts"
+}

package/heading/heading-level/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/solid-core/heading/heading-level",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/heading/heading-level.cjs",
+  "module": "../../esm/heading/heading-level.js",
+  "types": "../../cjs/heading/heading-level.d.ts"
+}

package/heading/utils/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ariakit/solid-core/heading/utils",
+  "private": true,
+  "sideEffects": false,
+  "main": "../../cjs/heading/utils.cjs",
+  "module": "../../esm/heading/utils.js",
+  "types": "../../cjs/heading/utils.d.ts"
+}

package/index.ts

@@ -0,0 +1 @@
+export default {};

package/license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Diego Haz, Dani Guardiola
+
+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.