@ariakit/solid-components 0.1.0

package/solid/as/as.jsx

@@ -0,0 +1,38 @@
+import { mergeProps } from "@ariakit/solid-utils";
+import { Dynamic } from "solid-js/web";
+//#region src/as/as.tsx
+const cache = /* @__PURE__ */ new Map();
+/**
+* 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.com/guide/composition)
+* guide for more details.
+* @example
+* ```jsx
+* <Role render={<As component={MyButton} variant="primary" />} />
+* <Role render={<As.button type="button" />} />
+* ```
+*/
+const As = new Proxy(function As(props) {
+	return ((parentProps) => <Dynamic {...mergeProps(parentProps, props)} component={props.component} />);
+}, { get: (_, key) => {
+	let component = cache.get(key);
+	if (!component) {
+		component = function AsElement(props) {
+			return ((parentProps) => <Dynamic {...mergeProps(parentProps, props)} component={key} />);
+		};
+		cache.set(key, component);
+	}
+	return component;
+} });
+//#endregion
+export { As };
+
+//# sourceMappingURL=as.jsx.map

package/solid/as/as.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"as.jsx","names":[],"sources":["../../src/as/as.tsx"],"sourcesContent":["import { mergeProps } from \"@ariakit/solid-utils\";\nimport type { Component, ComponentProps, JSX, ValidComponent } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\n\ntype AsElements = {\n  [K in keyof JSX.IntrinsicElements]: Component<ComponentProps<K>>;\n};\n\ntype AsComponent = <T extends Component<any>, P = ComponentProps<T>>(\n  props: AsProps<T, P>,\n) => JSX.Element;\n\nconst cache = new Map<string, Component<any>>();\n\n/**\n * Allows a component to be rendered as a different HTML element or Solid\n * component. Must be passed to the `render` prop of a component that\n * supports it.\n *\n * To render as an HTML element, use `<As.element />` (e.g. `<As.button />`).\n *\n * To render as a component, use `<As component={Component} />` (e.g. `<As\n * component={MyButton} />`).\n *\n * Check out the [Composition](https://solid.ariakit.com/guide/composition)\n * guide for more details.\n * @example\n * ```jsx\n * <Role render={<As component={MyButton} variant=\"primary\" />} />\n * <Role render={<As.button type=\"button\" />} />\n * ```\n */\nexport const As = new Proxy(\n  function As(props: any) {\n    return ((parentProps: unknown) => (\n      // TODO: replace with LazyDynamic\n      <Dynamic\n        {...mergeProps(parentProps, props)}\n        component={props.component}\n      />\n    )) as unknown as JSX.Element;\n  } as AsComponent & AsElements,\n  {\n    get: (_, key: keyof JSX.IntrinsicElements) => {\n      let component = cache.get(key);\n      if (!component) {\n        component = function AsElement(props: any): JSX.Element {\n          return ((parentProps: unknown) => (\n            // TODO: replace with LazyDynamic\n            <Dynamic {...mergeProps(parentProps, props)} component={key} />\n          )) as unknown as JSX.Element;\n        };\n        cache.set(key, component);\n      }\n      return component;\n    },\n  },\n);\n\nexport type AsProps<T extends ValidComponent, P = ComponentProps<T>> = {\n  [K in keyof P]: P[K];\n} & { component: T };\n"],"mappings":";;;AAYA,MAAM,wBAAQ,IAAI,IAA4B;;;;;;;;;;;;;;;;;;;AAoB9C,MAAa,KAAK,IAAI,MACpB,SAAS,GAAG,OAAY;CACtB,SAAS,gBAEP,CAAC,YACK,WAAW,aAAa,KAAK,GACjC,WAAW,MAAM;AAGvB,GACA,EACE,MAAM,GAAG,QAAqC;CAC5C,IAAI,YAAY,MAAM,IAAI,GAAG;CAC7B,IAAI,CAAC,WAAW;EACd,YAAY,SAAS,UAAU,OAAyB;GACtD,SAAS,gBAEP,CAAC,YAAY,WAAW,aAAa,KAAK,GAAG,WAAW;EAE5D;EACA,MAAM,IAAI,KAAK,SAAS;CAC1B;CACA,OAAO;AACT,EACF,CACF"}

package/solid/focus-trap/focus-trap-region.jsx

@@ -0,0 +1,65 @@
+import { FocusTrap } from "./focus-trap.jsx";
+import { createHook, createInstance, createRef, mergeProps, withOptions, wrapInstance } from "@ariakit/solid-utils";
+import { getAllTabbableIn } from "@ariakit/utils";
+import { Show } from "solid-js";
+//#region src/focus-trap/focus-trap-region.tsx
+const TagName = "div";
+/**
+* Returns props to create a `FocusTrapRegion` component.
+* @see https://solid.ariakit.com/components/focus-trap-region
+* @example
+* ```jsx
+* const props = useFocusTrapRegion();
+* <Role {...props} />
+* ```
+*/
+const useFocusTrapRegion = createHook(withOptions({ enabled: false }, function useFocusTrapRegion(props, options) {
+	const ref = createRef();
+	props = wrapInstance(props, (wrapperProps) => {
+		const renderFocusTrap = () => {
+			return <Show when={options.enabled}>
+            <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?.focus();
+				else first?.focus();
+			}} />
+          </Show>;
+		};
+		return <>
+          {renderFocusTrap()}
+          {wrapperProps.children}
+          {renderFocusTrap()}
+        </>;
+	});
+	props = mergeProps({ ref: ref.set }, props);
+	return props;
+}));
+/**
+* Renders a wrapper element that traps the focus inside it when the
+* [`enabled`](https://solid.ariakit.com/reference/focus-trap-region#enabled)
+* prop is `true`.
+* @see https://solid.ariakit.com/components/focus-trap
+* @example
+* ```jsx
+* <FocusTrapRegion>
+*  <Button>click me</Button>
+*  <Button>trap focus</Button>
+*  <Button disabled>disabled Button</Button>
+* </FocusTrapRegion>
+* ```
+*/
+const FocusTrapRegion = function FocusTrapRegion(props) {
+	return createInstance(TagName, useFocusTrapRegion(props));
+};
+//#endregion
+export { FocusTrapRegion, useFocusTrapRegion };
+
+//# sourceMappingURL=focus-trap-region.jsx.map

package/solid/focus-trap/focus-trap-region.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap-region.jsx","names":[],"sources":["../../src/focus-trap/focus-trap-region.tsx"],"sourcesContent":["import {\n  createRef,\n  mergeProps,\n  createHook,\n  createInstance,\n  withOptions,\n  wrapInstance,\n} from \"@ariakit/solid-utils\";\nimport type { Options, Props } from \"@ariakit/solid-utils\";\nimport { getAllTabbableIn } from \"@ariakit/utils\";\nimport type { ValidComponent } from \"solid-js\";\nimport { Show } from \"solid-js\";\nimport { FocusTrap } from \"./focus-trap.tsx\";\n\nconst TagName = \"div\" satisfies ValidComponent;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `FocusTrapRegion` component.\n * @see https://solid.ariakit.com/components/focus-trap-region\n * @example\n * ```jsx\n * const props = useFocusTrapRegion();\n * <Role {...props} />\n * ```\n */\nexport const useFocusTrapRegion = createHook<TagName, FocusTrapRegionOptions>(\n  withOptions({ enabled: false }, function useFocusTrapRegion(props, options) {\n    const ref = createRef<HTMLType>();\n\n    props = wrapInstance(props, (wrapperProps) => {\n      const renderFocusTrap = () => {\n        return (\n          <Show when={options.enabled}>\n            <FocusTrap\n              onFocus={(event) => {\n                // TODO: (react) opportunity to extract into @ariakit/components?\n                const container = ref.current;\n                if (!container) return;\n                const tabbables = getAllTabbableIn(container, true);\n                const first = tabbables[0];\n                const last = tabbables[tabbables.length - 1];\n                // Fallbacks to the container element\n                if (!tabbables.length) {\n                  container.focus();\n                  return;\n                }\n                if (event.relatedTarget === first) {\n                  last?.focus();\n                } else {\n                  first?.focus();\n                }\n              }}\n            />\n          </Show>\n        );\n      };\n      return (\n        <>\n          {renderFocusTrap()}\n          {wrapperProps.children}\n          {renderFocusTrap()}\n        </>\n      );\n    });\n\n    props = mergeProps({ ref: ref.set }, props);\n\n    return props;\n  }),\n);\n\n/**\n * Renders a wrapper element that traps the focus inside it when the\n * [`enabled`](https://solid.ariakit.com/reference/focus-trap-region#enabled)\n * prop is `true`.\n * @see https://solid.ariakit.com/components/focus-trap\n * @example\n * ```jsx\n * <FocusTrapRegion>\n *  <Button>click me</Button>\n *  <Button>trap focus</Button>\n *  <Button disabled>disabled Button</Button>\n * </FocusTrapRegion>\n * ```\n */\nexport const FocusTrapRegion = function FocusTrapRegion(\n  props: FocusTrapRegionProps,\n) {\n  const htmlProps = useFocusTrapRegion(props);\n  return createInstance(TagName, htmlProps);\n};\n\nexport interface FocusTrapRegionOptions<\n  _T extends ValidComponent = TagName,\n> extends Options {\n  /**\n   * If true, it will trap the focus in the region.\n   * @default false\n   */\n  enabled?: boolean;\n}\n\nexport type FocusTrapRegionProps<T extends ValidComponent = TagName> = Props<\n  T,\n  FocusTrapRegionOptions<T>\n>;\n"],"mappings":";;;;;AAcA,MAAM,UAAU;;;;;;;;;;AAahB,MAAa,qBAAqB,WAChC,YAAY,EAAE,SAAS,MAAM,GAAG,SAAS,mBAAmB,OAAO,SAAS;CAC1E,MAAM,MAAM,UAAoB;CAEhC,QAAQ,aAAa,QAAQ,iBAAiB;EAC5C,MAAM,wBAAwB;GAC5B,OACE,CAAC,KAAK,MAAM,QAAQ,SAAS;YAC3B,CAAC,UACC,UAAU,UAAU;IAElB,MAAM,YAAY,IAAI;IACtB,IAAI,CAAC,WAAW;IAChB,MAAM,YAAY,iBAAiB,WAAW,IAAI;IAClD,MAAM,QAAQ,UAAU;IACxB,MAAM,OAAO,UAAU,UAAU,SAAS;IAE1C,IAAI,CAAC,UAAU,QAAQ;KACrB,UAAU,MAAM;KAChB;IACF;IACA,IAAI,MAAM,kBAAkB,OAC1B,MAAM,MAAM;SAEZ,OAAO,MAAM;GAEjB,KACA;UACJ,EAAE;EAEN;EACA,OACE,EAAE;WACC,gBAAgB,EAAE;WAClB,aAAa,SAAS;WACtB,gBAAgB,EAAE;QACrB;CAEJ,CAAC;CAED,QAAQ,WAAW,EAAE,KAAK,IAAI,IAAI,GAAG,KAAK;CAE1C,OAAO;AACT,CAAC,CACH;;;;;;;;;;;;;;;AAgBA,MAAa,kBAAkB,SAAS,gBACtC,OACA;CAEA,OAAO,eAAe,SADJ,mBAAmB,KACE,CAAC;AAC1C"}

package/solid/focus-trap/focus-trap.jsx

@@ -0,0 +1,42 @@
+import { useVisuallyHidden } from "../visually-hidden/visually-hidden.jsx";
+import { createHook, createInstance, mergeProps } from "@ariakit/solid-utils";
+//#region src/focus-trap/focus-trap.tsx
+const TagName = "span";
+/**
+* Returns props to create a `FocusTrap` component.
+* @see https://solid.ariakit.com/components/focus-trap
+* @example
+* ```jsx
+* const props = useFocusTrap();
+* <Role {...props} />
+* ```
+*/
+const useFocusTrap = createHook(function useFocusTrap(props) {
+	props = mergeProps({
+		"data-focus-trap": "",
+		tabIndex: 0,
+		"aria-hidden": true,
+		style: {
+			position: "fixed",
+			top: 0,
+			left: 0
+		}
+	}, props);
+	props = useVisuallyHidden(props);
+	return props;
+});
+/**
+* Renders a focus trap element.
+* @see https://solid.ariakit.com/components/focus-trap
+* @example
+* ```jsx
+* <FocusTrap onFocus={focusSomethingElse} />
+* ```
+*/
+function FocusTrap(props) {
+	return createInstance(TagName, useFocusTrap(props));
+}
+//#endregion
+export { FocusTrap, useFocusTrap };
+
+//# sourceMappingURL=focus-trap.jsx.map

package/solid/focus-trap/focus-trap.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap.jsx","names":[],"sources":["../../src/focus-trap/focus-trap.tsx"],"sourcesContent":["import { mergeProps, createHook, createInstance } from \"@ariakit/solid-utils\";\nimport type { Props } from \"@ariakit/solid-utils\";\nimport type { ValidComponent } from \"solid-js\";\nimport type { VisuallyHiddenOptions } from \"../visually-hidden/visually-hidden.tsx\";\nimport { useVisuallyHidden } from \"../visually-hidden/visually-hidden.tsx\";\n\nconst TagName = \"span\" satisfies ValidComponent;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FocusTrap` component.\n * @see https://solid.ariakit.com/components/focus-trap\n * @example\n * ```jsx\n * const props = useFocusTrap();\n * <Role {...props} />\n * ```\n */\nexport const useFocusTrap = createHook<TagName, FocusTrapOptions>(\n  function useFocusTrap(props) {\n    props = mergeProps(\n      {\n        \"data-focus-trap\": \"\",\n        tabIndex: 0,\n        \"aria-hidden\": true,\n        style: {\n          // Prevents unintended scroll jumps.\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n        },\n      },\n      props,\n    );\n\n    props = useVisuallyHidden(props);\n\n    return props;\n  },\n);\n\n/**\n * Renders a focus trap element.\n * @see https://solid.ariakit.com/components/focus-trap\n * @example\n * ```jsx\n * <FocusTrap onFocus={focusSomethingElse} />\n * ```\n */\nexport function FocusTrap(props: FocusTrapProps) {\n  const htmlProps = useFocusTrap(props);\n  return createInstance(TagName, htmlProps);\n}\n\nexport type FocusTrapOptions<T extends ValidComponent = TagName> =\n  VisuallyHiddenOptions<T>;\n\nexport type FocusTrapProps<T extends ValidComponent = TagName> = Props<\n  T,\n  FocusTrapOptions<T>\n>;\n"],"mappings":";;;AAMA,MAAM,UAAU;;;;;;;;;;AAYhB,MAAa,eAAe,WAC1B,SAAS,aAAa,OAAO;CAC3B,QAAQ,WACN;EACE,mBAAmB;EACnB,UAAU;EACV,eAAe;EACf,OAAO;GAEL,UAAU;GACV,KAAK;GACL,MAAM;EACR;CACF,GACA,KACF;CAEA,QAAQ,kBAAkB,KAAK;CAE/B,OAAO;AACT,CACF;;;;;;;;;AAUA,SAAgB,UAAU,OAAuB;CAE/C,OAAO,eAAe,SADJ,aAAa,KACQ,CAAC;AAC1C"}

package/solid/group/group-label-context.jsx

@@ -0,0 +1,7 @@
+import { createContext } from "solid-js";
+//#region src/group/group-label-context.tsx
+const GroupLabelContext = createContext();
+//#endregion
+export { GroupLabelContext };
+
+//# sourceMappingURL=group-label-context.jsx.map

package/solid/group/group-label-context.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-label-context.jsx","names":[],"sources":["../../src/group/group-label-context.tsx"],"sourcesContent":["import type { Setter } from \"solid-js\";\nimport { createContext } from \"solid-js\";\n\nexport const GroupLabelContext = createContext<Setter<string | undefined>>();\n"],"mappings":";;AAGA,MAAa,oBAAoB,cAA0C"}

package/solid/group/group-label.jsx

@@ -0,0 +1,51 @@
+import { GroupLabelContext } from "./group-label-context.jsx";
+import { createHook, createId, createInstance, mergeProps, stableAccessor } from "@ariakit/solid-utils";
+import { createEffect, onCleanup, useContext } from "solid-js";
+//#region src/group/group-label.tsx
+const TagName = "div";
+/**
+* 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.com/components/group
+* @example
+* ```jsx
+* // This component must be wrapped with Group
+* const props = useGroupLabel();
+* <Role {...props}>Label</Role>
+* ```
+*/
+const useGroupLabel = createHook(function useGroupLabel(props) {
+	const setLabelId = useContext(GroupLabelContext);
+	const id = createId(stableAccessor(props, (p) => p.id));
+	createEffect(() => {
+		setLabelId?.(id());
+		onCleanup(() => setLabelId?.(void 0));
+	});
+	props = mergeProps({
+		get id() {
+			return id();
+		},
+		"aria-hidden": true
+	}, props);
+	return props;
+});
+/**
+* Renders a label in a group. This component should be wrapped with a
+* [`Group`](https://solid.ariakit.com/reference/group) so the `aria-labelledby`
+* prop is correctly set on the group element.
+* @see https://solid.ariakit.com/components/group
+* @example
+* ```jsx
+* <Group>
+*   <GroupLabel>Label</GroupLabel>
+* </Group>
+* ```
+*/
+const GroupLabel = function GroupLabel(props) {
+	return createInstance(TagName, useGroupLabel(props));
+};
+//#endregion
+export { GroupLabel, useGroupLabel };
+
+//# sourceMappingURL=group-label.jsx.map

package/solid/group/group-label.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-label.jsx","names":[],"sources":["../../src/group/group-label.tsx"],"sourcesContent":["import {\n  createId,\n  mergeProps,\n  stableAccessor,\n  createHook,\n  createInstance,\n} from \"@ariakit/solid-utils\";\nimport type { Options, Props } from \"@ariakit/solid-utils\";\nimport type { ValidComponent } from \"solid-js\";\nimport { createEffect, onCleanup, useContext } from \"solid-js\";\nimport { GroupLabelContext } from \"./group-label-context.tsx\";\n\nconst TagName = \"div\" satisfies ValidComponent;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `GroupLabel` component. This hook must be used in a\n * component that's wrapped with `Group` so the `aria-labelledby` prop is\n * properly set on the group element.\n * @see https://solid.ariakit.com/components/group\n * @example\n * ```jsx\n * // This component must be wrapped with Group\n * const props = useGroupLabel();\n * <Role {...props}>Label</Role>\n * ```\n */\nexport const useGroupLabel = createHook<TagName, GroupLabelOptions>(\n  function useGroupLabel(props) {\n    const setLabelId = useContext(GroupLabelContext);\n    const id = createId(stableAccessor(props, (p) => p.id));\n\n    createEffect(() => {\n      setLabelId?.(id());\n      onCleanup(() => setLabelId?.(undefined));\n    });\n\n    props = mergeProps(\n      {\n        get id() {\n          return id();\n        },\n        \"aria-hidden\": true,\n      },\n      props,\n    );\n\n    return props;\n  },\n);\n\n/**\n * Renders a label in a group. This component should be wrapped with a\n * [`Group`](https://solid.ariakit.com/reference/group) so the `aria-labelledby`\n * prop is correctly set on the group element.\n * @see https://solid.ariakit.com/components/group\n * @example\n * ```jsx\n * <Group>\n *   <GroupLabel>Label</GroupLabel>\n * </Group>\n * ```\n */\nexport const GroupLabel = function GroupLabel(props: GroupLabelProps) {\n  const htmlProps = useGroupLabel(props);\n  return createInstance(TagName, htmlProps);\n};\n\nexport interface GroupLabelOptions<\n  _T extends ValidComponent = TagName,\n> extends Options {}\n\nexport type GroupLabelProps<T extends ValidComponent = TagName> = Props<\n  T,\n  GroupLabelOptions<T>\n>;\n"],"mappings":";;;;AAYA,MAAM,UAAU;;;;;;;;;;;;;AAehB,MAAa,gBAAgB,WAC3B,SAAS,cAAc,OAAO;CAC5B,MAAM,aAAa,WAAW,iBAAiB;CAC/C,MAAM,KAAK,SAAS,eAAe,QAAQ,MAAM,EAAE,EAAE,CAAC;CAEtD,mBAAmB;EACjB,aAAa,GAAG,CAAC;EACjB,gBAAgB,aAAa,KAAA,CAAS,CAAC;CACzC,CAAC;CAED,QAAQ,WACN;EACE,IAAI,KAAK;GACP,OAAO,GAAG;EACZ;EACA,eAAe;CACjB,GACA,KACF;CAEA,OAAO;AACT,CACF;;;;;;;;;;;;;AAcA,MAAa,aAAa,SAAS,WAAW,OAAwB;CAEpE,OAAO,eAAe,SADJ,cAAc,KACO,CAAC;AAC1C"}

package/solid/group/group.jsx

@@ -0,0 +1,43 @@
+import { As } from "../as/as.jsx";
+import { GroupLabelContext } from "./group-label-context.jsx";
+import { createHook, createInstance, mergeProps, wrapInstance } from "@ariakit/solid-utils";
+import { createSignal } from "solid-js";
+//#region src/group/group.tsx
+const TagName = "div";
+/**
+* Returns props to create a `Group` component.
+* @see https://solid.ariakit.com/components/group
+* @example
+* ```jsx
+* const props = useGroup();
+* <Role {...props}>Group</Role>
+* ```
+*/
+const useGroup = createHook(function useGroup(props) {
+	const [labelId, setLabelId] = createSignal();
+	props = wrapInstance(props, <As component={GroupLabelContext.Provider} value={setLabelId} />);
+	props = mergeProps({
+		role: "group",
+		get "aria-labelledby"() {
+			return labelId();
+		}
+	}, props);
+	return props;
+});
+/**
+* Renders a group element. Optionally, a
+* [`GroupLabel`](https://solid.ariakit.com/reference/group-label) can be rendered as
+* a child to provide a label for the group.
+* @see https://solid.ariakit.com/components/group
+* @example
+* ```jsx
+* <Group>Group</Group>
+* ```
+*/
+const Group = function Group(props) {
+	return createInstance(TagName, useGroup(props));
+};
+//#endregion
+export { Group, useGroup };
+
+//# sourceMappingURL=group.jsx.map

package/solid/group/group.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.jsx","names":[],"sources":["../../src/group/group.tsx"],"sourcesContent":["import {\n  mergeProps,\n  createHook,\n  createInstance,\n  wrapInstance,\n} from \"@ariakit/solid-utils\";\nimport type { Options, Props } from \"@ariakit/solid-utils\";\nimport type { ValidComponent } from \"solid-js\";\nimport { createSignal } from \"solid-js\";\nimport { As } from \"../as/as.tsx\";\nimport { GroupLabelContext } from \"./group-label-context.tsx\";\n\nconst TagName = \"div\" satisfies ValidComponent;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `Group` component.\n * @see https://solid.ariakit.com/components/group\n * @example\n * ```jsx\n * const props = useGroup();\n * <Role {...props}>Group</Role>\n * ```\n */\nexport const useGroup = createHook<TagName, GroupOptions>(\n  function useGroup(props) {\n    const [labelId, setLabelId] = createSignal<string>();\n\n    props = wrapInstance(\n      props,\n      <As component={GroupLabelContext.Provider} value={setLabelId} />,\n    );\n\n    props = mergeProps(\n      {\n        role: \"group\" as const,\n        get \"aria-labelledby\"() {\n          return labelId();\n        },\n      },\n      props,\n    );\n\n    return props;\n  },\n);\n\n/**\n * Renders a group element. Optionally, a\n * [`GroupLabel`](https://solid.ariakit.com/reference/group-label) can be rendered as\n * a child to provide a label for the group.\n * @see https://solid.ariakit.com/components/group\n * @example\n * ```jsx\n * <Group>Group</Group>\n * ```\n */\nexport const Group = function Group(props: GroupProps) {\n  const htmlProps = useGroup(props);\n  return createInstance(TagName, htmlProps);\n};\n\nexport type GroupOptions<_T extends ValidComponent = TagName> = Options;\n\nexport type GroupProps<T extends ValidComponent = TagName> = Props<\n  T,\n  GroupOptions<T>\n>;\n"],"mappings":";;;;;AAYA,MAAM,UAAU;;;;;;;;;;AAYhB,MAAa,WAAW,WACtB,SAAS,SAAS,OAAO;CACvB,MAAM,CAAC,SAAS,cAAc,aAAqB;CAEnD,QAAQ,aACN,OACA,CAAC,GAAG,WAAW,kBAAkB,UAAU,OAAO,cACpD;CAEA,QAAQ,WACN;EACE,MAAM;EACN,IAAI,oBAAoB;GACtB,OAAO,QAAQ;EACjB;CACF,GACA,KACF;CAEA,OAAO;AACT,CACF;;;;;;;;;;;AAYA,MAAa,QAAQ,SAAS,MAAM,OAAmB;CAErD,OAAO,eAAe,SADJ,SAAS,KACY,CAAC;AAC1C"}

package/solid/heading/heading-context.jsx

@@ -0,0 +1,7 @@
+import { createContext } from "solid-js";
+//#region src/heading/heading-context.tsx
+const HeadingContext = createContext();
+//#endregion
+export { HeadingContext };
+
+//# sourceMappingURL=heading-context.jsx.map

package/solid/heading/heading-context.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-context.jsx","names":[],"sources":["../../src/heading/heading-context.tsx"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { createContext } from \"solid-js\";\nimport type { HeadingLevels } from \"./utils.ts\";\n\nexport const HeadingContext = createContext<Accessor<HeadingLevels>>();\n"],"mappings":";;AAIA,MAAa,iBAAiB,cAAuC"}

package/solid/heading/heading-level.jsx

@@ -0,0 +1,30 @@
+import { HeadingContext } from "./heading-context.jsx";
+import { useContext } from "solid-js";
+//#region src/heading/heading-level.tsx
+/**
+* A component that sets the heading level for its children. It doesn't render
+* any HTML element, just sets the
+* [`level`](https://solid.ariakit.com/reference/heading-level#level) prop on the
+* context.
+* @see https://solid.ariakit.com/components/heading
+* @example
+* ```jsx
+* <HeadingLevel>
+*   <Heading>Heading 1</Heading>
+*   <HeadingLevel>
+*     <Heading>Heading 2</Heading>
+*   </HeadingLevel>
+* </HeadingLevel>
+* ```
+*/
+function HeadingLevel(props) {
+	const contextLevel = useContext(HeadingContext);
+	const nextLevel = () => Math.max(Math.min(props.level || (contextLevel?.() ?? 0) + 1, 6), 1);
+	return <HeadingContext.Provider value={nextLevel}>
+      {props.children}
+    </HeadingContext.Provider>;
+}
+//#endregion
+export { HeadingLevel };
+
+//# sourceMappingURL=heading-level.jsx.map

package/solid/heading/heading-level.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-level.jsx","names":[],"sources":["../../src/heading/heading-level.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { useContext } from \"solid-js\";\nimport { HeadingContext } from \"./heading-context.tsx\";\nimport type { HeadingLevels } from \"./utils.ts\";\n\n/**\n * A component that sets the heading level for its children. It doesn't render\n * any HTML element, just sets the\n * [`level`](https://solid.ariakit.com/reference/heading-level#level) prop on the\n * context.\n * @see https://solid.ariakit.com/components/heading\n * @example\n * ```jsx\n * <HeadingLevel>\n *   <Heading>Heading 1</Heading>\n *   <HeadingLevel>\n *     <Heading>Heading 2</Heading>\n *   </HeadingLevel>\n * </HeadingLevel>\n * ```\n */\nexport function HeadingLevel(props: HeadingLevelProps) {\n  const contextLevel = useContext(HeadingContext);\n  const nextLevel = () =>\n    Math.max(\n      Math.min(props.level || (contextLevel?.() ?? 0) + 1, 6),\n      1,\n    ) as HeadingLevels;\n  return (\n    <HeadingContext.Provider value={nextLevel}>\n      {props.children}\n    </HeadingContext.Provider>\n  );\n}\n\nexport interface HeadingLevelProps {\n  /**\n   * The heading level. By default, it'll increase the level by 1 based on the\n   * context.\n   */\n  level?: HeadingLevels;\n  children?: JSX.Element;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,aAAa,OAA0B;CACrD,MAAM,eAAe,WAAW,cAAc;CAC9C,MAAM,kBACJ,KAAK,IACH,KAAK,IAAI,MAAM,UAAU,eAAe,KAAK,KAAK,GAAG,CAAC,GACtD,CACF;CACF,OACE,CAAC,eAAe,SAAS,OAAO,WAAW;OACxC,MAAM,SAAS;IAClB,EAAE,eAAe;AAErB"}

package/solid/heading/heading.jsx

@@ -0,0 +1,57 @@
+import { HeadingContext } from "./heading-context.jsx";
+import { createHook, createInstance, createRef, extractTagName, mergeProps } from "@ariakit/solid-utils";
+import { createMemo, useContext } from "solid-js";
+//#region src/heading/heading.tsx
+const TagName = "h1";
+/**
+* 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.com/components/heading
+* @example
+* ```jsx
+* const props = useHeading();
+* <Role {...props}>Heading</Role>
+* ```
+*/
+const useHeading = createHook(function useHeading(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({
+		render: Element(),
+		get role() {
+			return !isNativeHeading() ? "heading" : void 0;
+		},
+		get "aria-level"() {
+			return !isNativeHeading() ? level() : void 0;
+		},
+		ref: ref.set
+	}, props);
+	return props;
+});
+/**
+* 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.com/reference/heading-level) ancestor.
+* @see https://solid.ariakit.com/components/heading
+* @example
+* ```jsx
+* <HeadingLevel>
+*   <Heading>Heading 1</Heading>
+*   <HeadingLevel>
+*     <Heading>Heading 2</Heading>
+*   </HeadingLevel>
+* </HeadingLevel>
+* ```
+*/
+const Heading = function Heading(props) {
+	return createInstance(TagName, useHeading(props));
+};
+//#endregion
+export { Heading, useHeading };
+
+//# sourceMappingURL=heading.jsx.map

package/solid/heading/heading.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.jsx","names":[],"sources":["../../src/heading/heading.tsx"],"sourcesContent":["import {\n  extractTagName,\n  createRef,\n  mergeProps,\n  createHook,\n  createInstance,\n} from \"@ariakit/solid-utils\";\nimport type { Options, Props } from \"@ariakit/solid-utils\";\nimport type { ValidComponent } from \"solid-js\";\nimport { createMemo, useContext } from \"solid-js\";\nimport { HeadingContext } from \"./heading-context.tsx\";\nimport type { HeadingLevels } from \"./utils.ts\";\n\ntype HeadingElements = `h${HeadingLevels}`;\nconst TagName = \"h1\" satisfies ValidComponent;\ntype TagName = HeadingElements;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `Heading` component. The element type (or the\n * `aria-level` prop, if the element type is not a native heading) is determined\n * by the context level provided by the parent `HeadingLevel` component.\n * @see https://solid.ariakit.com/components/heading\n * @example\n * ```jsx\n * const props = useHeading();\n * <Role {...props}>Heading</Role>\n * ```\n */\nexport const useHeading = createHook<TagName, HeadingOptions>(\n  function useHeading(props) {\n    const ref = createRef<HTMLType>();\n    const level = useContext(HeadingContext) || (() => 1);\n    const Element = () => `h${level()}` as const;\n    const tagName = extractTagName(ref.get);\n    const isNativeHeading = createMemo(\n      () => !!tagName() && /^h\\d$/.test(tagName()!),\n    );\n\n    props = mergeProps(\n      {\n        // TODO: replace with LazyDynamic\n        render: Element(),\n        get role() {\n          return !isNativeHeading() ? \"heading\" : undefined;\n        },\n        get \"aria-level\"() {\n          return !isNativeHeading() ? level() : undefined;\n        },\n        ref: ref.set,\n      },\n      props,\n    );\n\n    return props;\n  },\n);\n\n/**\n * Renders a heading element. The element type (or the `aria-level` attribute,\n * if the element type is not a native heading) is determined by the context\n * level provided by the closest\n * [`HeadingLevel`](https://solid.ariakit.com/reference/heading-level) ancestor.\n * @see https://solid.ariakit.com/components/heading\n * @example\n * ```jsx\n * <HeadingLevel>\n *   <Heading>Heading 1</Heading>\n *   <HeadingLevel>\n *     <Heading>Heading 2</Heading>\n *   </HeadingLevel>\n * </HeadingLevel>\n * ```\n */\nexport const Heading = function Heading(props: HeadingProps) {\n  const htmlProps = useHeading(props);\n  return createInstance(TagName, htmlProps);\n};\n\nexport interface HeadingOptions<\n  _T extends ValidComponent = TagName,\n> extends Options {}\n\nexport type HeadingProps<T extends ValidComponent = TagName> = Props<\n  T,\n  HeadingOptions<T>\n>;\n"],"mappings":";;;;AAcA,MAAM,UAAU;;;;;;;;;;;;AAehB,MAAa,aAAa,WACxB,SAAS,WAAW,OAAO;CACzB,MAAM,MAAM,UAAoB;CAChC,MAAM,QAAQ,WAAW,cAAc,YAAY;CACnD,MAAM,gBAAgB,IAAI,MAAM;CAChC,MAAM,UAAU,eAAe,IAAI,GAAG;CACtC,MAAM,kBAAkB,iBAChB,CAAC,CAAC,QAAQ,KAAK,QAAQ,KAAK,QAAQ,CAAE,CAC9C;CAEA,QAAQ,WACN;EAEE,QAAQ,QAAQ;EAChB,IAAI,OAAO;GACT,OAAO,CAAC,gBAAgB,IAAI,YAAY,KAAA;EAC1C;EACA,IAAI,eAAe;GACjB,OAAO,CAAC,gBAAgB,IAAI,MAAM,IAAI,KAAA;EACxC;EACA,KAAK,IAAI;CACX,GACA,KACF;CAEA,OAAO;AACT,CACF;;;;;;;;;;;;;;;;;AAkBA,MAAa,UAAU,SAAS,QAAQ,OAAqB;CAE3D,OAAO,eAAe,SADJ,WAAW,KACU,CAAC;AAC1C"}

package/solid/role/role.jsx

@@ -0,0 +1,67 @@
+import { createHook, createInstance } from "@ariakit/solid-utils";
+//#region src/role/role.tsx
+const TagName = "div";
+const 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"
+];
+/**
+* Returns props to create a `Role` component.
+* @see https://solid.ariakit.com/components/role
+* @example
+* ```jsx
+* const props = useRole();
+* <Role {...props} />
+* ```
+*/
+const useRole = createHook(function useRole(props) {
+	return props;
+});
+/**
+* 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.com/components/role
+* @example
+* ```jsx
+* <Role render={<As.div />} />
+* ```
+*/
+const Role = function Role(props) {
+	return createInstance(TagName, props);
+};
+Object.assign(Role, elements.reduce((acc, element) => {
+	acc[element] = function Role(props) {
+		return createInstance(element, props);
+	};
+	return acc;
+}, {}));
+//#endregion
+export { Role, elements, useRole };
+
+//# sourceMappingURL=role.jsx.map

package/solid/role/role.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"role.jsx","names":[],"sources":["../../src/role/role.tsx"],"sourcesContent":["import { createHook, createInstance } from \"@ariakit/solid-utils\";\nimport type { Options, Props } from \"@ariakit/solid-utils\";\nimport type { Component, JSX, ValidComponent } from \"solid-js\";\n\nconst TagName = \"div\" satisfies ValidComponent;\ntype TagName = typeof TagName;\n\nexport const elements = [\n  \"a\",\n  \"button\",\n  \"details\",\n  \"dialog\",\n  \"div\",\n  \"form\",\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"h5\",\n  \"h6\",\n  \"header\",\n  \"img\",\n  \"input\",\n  \"label\",\n  \"li\",\n  \"nav\",\n  \"ol\",\n  \"p\",\n  \"section\",\n  \"select\",\n  \"span\",\n  \"summary\",\n  \"textarea\",\n  \"ul\",\n  \"svg\",\n] as const;\n\ntype RoleElements = {\n  [K in (typeof elements)[number]]: Component<RoleProps<K>>;\n};\n\n/**\n * Returns props to create a `Role` component.\n * @see https://solid.ariakit.com/components/role\n * @example\n * ```jsx\n * const props = useRole();\n * <Role {...props} />\n * ```\n */\nexport const useRole = createHook<TagName, RoleOptions>(\n  function useRole(props) {\n    return props;\n  },\n);\n\n// TODO: adapt docs wording to be more accurate for Solid\n/**\n * Renders an abstract element that supports the `render` prop and a\n * `wrapInstance` prop that can be used to wrap the underlying component\n * instance with Solid Portal, Context or other component types.\n * @see https://solid.ariakit.com/components/role\n * @example\n * ```jsx\n * <Role render={<As.div />} />\n * ```\n */\nexport const Role = function Role(props: RoleProps): JSX.Element {\n  return createInstance(TagName, props);\n} as Component<RoleProps> & RoleElements;\n\nObject.assign(\n  Role,\n  elements.reduce((acc, element) => {\n    acc[element] = function Role(\n      props: RoleProps<typeof element>,\n    ): JSX.Element {\n      return createInstance(element, props);\n    };\n    return acc;\n  }, {} as RoleElements),\n);\n\nexport interface RoleOptions<\n  _T extends ValidComponent = TagName,\n> extends Options {}\n\nexport type RoleProps<T extends ValidComponent = TagName> = Props<\n  T,\n  RoleOptions\n>;\n"],"mappings":";;AAIA,MAAM,UAAU;AAGhB,MAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;;;AAeA,MAAa,UAAU,WACrB,SAAS,QAAQ,OAAO;CACtB,OAAO;AACT,CACF;;;;;;;;;;;AAaA,MAAa,OAAO,SAAS,KAAK,OAA+B;CAC/D,OAAO,eAAe,SAAS,KAAK;AACtC;AAEA,OAAO,OACL,MACA,SAAS,QAAQ,KAAK,YAAY;CAChC,IAAI,WAAW,SAAS,KACtB,OACa;EACb,OAAO,eAAe,SAAS,KAAK;CACtC;CACA,OAAO;AACT,GAAG,CAAC,CAAiB,CACvB"}

package/solid/separator/separator.jsx

@@ -0,0 +1,36 @@
+import { createHook, createInstance, mergeProps, withOptions } from "@ariakit/solid-utils";
+//#region src/separator/separator.tsx
+const TagName = "hr";
+/**
+* Returns props to create a `Separator` component.
+* @see https://solid.ariakit.com/components/separator
+* @example
+* ```jsx
+* const props = useSeparator({ orientation: "horizontal" });
+* <Role {...props} />
+* ```
+*/
+const useSeparator = createHook(withOptions({ orientation: "horizontal" }, function useSeparator(props, options) {
+	props = mergeProps({
+		role: "separator",
+		get "aria-orientation"() {
+			return options.orientation;
+		}
+	}, props);
+	return props;
+}));
+/**
+* Renders a separator element.
+* @see https://solid.ariakit.com/components/separator
+* @example
+* ```jsx
+* <Separator orientation="horizontal" />
+* ```
+*/
+const Separator = function Separator(props) {
+	return createInstance(TagName, useSeparator(props));
+};
+//#endregion
+export { Separator, useSeparator };
+
+//# sourceMappingURL=separator.jsx.map

package/solid/separator/separator.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.jsx","names":[],"sources":["../../src/separator/separator.tsx"],"sourcesContent":["import {\n  mergeProps,\n  createHook,\n  createInstance,\n  withOptions,\n} from \"@ariakit/solid-utils\";\nimport type { Options, Props } from \"@ariakit/solid-utils\";\nimport type { ValidComponent } from \"solid-js\";\n\nconst TagName = \"hr\" satisfies ValidComponent;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `Separator` component.\n * @see https://solid.ariakit.com/components/separator\n * @example\n * ```jsx\n * const props = useSeparator({ orientation: \"horizontal\" });\n * <Role {...props} />\n * ```\n */\nexport const useSeparator = createHook<TagName, SeparatorOptions>(\n  withOptions(\n    { orientation: \"horizontal\" },\n    function useSeparator(props, options) {\n      props = mergeProps(\n        {\n          role: \"separator\" as const,\n          get \"aria-orientation\"() {\n            return options.orientation;\n          },\n        },\n        props,\n      );\n      return props;\n    },\n  ),\n);\n\n/**\n * Renders a separator element.\n * @see https://solid.ariakit.com/components/separator\n * @example\n * ```jsx\n * <Separator orientation=\"horizontal\" />\n * ```\n */\nexport const Separator = function Separator(props: SeparatorProps) {\n  const htmlProps = useSeparator(props);\n  return createInstance(TagName, htmlProps);\n};\n\nexport interface SeparatorOptions<\n  _T extends ValidComponent = TagName,\n> extends Options {\n  /**\n   * The orientation of the separator.\n   * @default \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport type SeparatorProps<T extends ValidComponent = TagName> = Props<\n  T,\n  SeparatorOptions<T>\n>;\n"],"mappings":";;AASA,MAAM,UAAU;;;;;;;;;;AAYhB,MAAa,eAAe,WAC1B,YACE,EAAE,aAAa,aAAa,GAC5B,SAAS,aAAa,OAAO,SAAS;CACpC,QAAQ,WACN;EACE,MAAM;EACN,IAAI,qBAAqB;GACvB,OAAO,QAAQ;EACjB;CACF,GACA,KACF;CACA,OAAO;AACT,CACF,CACF;;;;;;;;;AAUA,MAAa,YAAY,SAAS,UAAU,OAAuB;CAEjE,OAAO,eAAe,SADJ,aAAa,KACQ,CAAC;AAC1C"}

package/solid/visually-hidden/visually-hidden.jsx

@@ -0,0 +1,48 @@
+import { createHook, createInstance, mergeProps } from "@ariakit/solid-utils";
+//#region src/visually-hidden/visually-hidden.tsx
+const TagName = "span";
+/**
+* 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.com/components/visually-hidden
+* @example
+* ```jsx
+* const props = useVisuallyHidden();
+* <a href="#">
+*   Learn more<Role {...props}> about the Solar System</Role>.
+* </a>
+* ```
+*/
+const useVisuallyHidden = createHook(function useVisuallyHidden(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;
+});
+/**
+* Renders an element that's visually hidden, but still accessible to screen
+* readers.
+* @see https://solid.ariakit.com/components/visually-hidden
+* @example
+* ```jsx
+* <a href="#">
+*   Learn more<VisuallyHidden> about the Solar System</VisuallyHidden>.
+* </a>
+* ```
+*/
+function VisuallyHidden(props) {
+	return createInstance(TagName, useVisuallyHidden(props));
+}
+//#endregion
+export { VisuallyHidden, useVisuallyHidden };
+
+//# sourceMappingURL=visually-hidden.jsx.map

package/solid/visually-hidden/visually-hidden.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.jsx","names":[],"sources":["../../src/visually-hidden/visually-hidden.tsx"],"sourcesContent":["import { mergeProps, createHook, createInstance } from \"@ariakit/solid-utils\";\nimport type { Options, Props } from \"@ariakit/solid-utils\";\nimport type { ValidComponent } from \"solid-js\";\n\nconst TagName = \"span\" satisfies ValidComponent;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `VisuallyHidden` component. When applying the props\n * returned by this hook to a component, the component will be visually hidden,\n * but still accessible to screen readers.\n * @see https://solid.ariakit.com/components/visually-hidden\n * @example\n * ```jsx\n * const props = useVisuallyHidden();\n * <a href=\"#\">\n *   Learn more<Role {...props}> about the Solar System</Role>.\n * </a>\n * ```\n */\nexport const useVisuallyHidden = createHook<TagName, VisuallyHiddenOptions>(\n  function useVisuallyHidden(props) {\n    props = mergeProps(\n      {\n        style: {\n          border: 0,\n          clip: \"rect(0 0 0 0)\",\n          height: \"1px\",\n          margin: \"-1px\",\n          overflow: \"hidden\",\n          padding: 0,\n          position: \"absolute\",\n          \"white-space\": \"nowrap\",\n          width: \"1px\",\n        },\n      },\n      props,\n    );\n    return props;\n  },\n);\n\n/**\n * Renders an element that's visually hidden, but still accessible to screen\n * readers.\n * @see https://solid.ariakit.com/components/visually-hidden\n * @example\n * ```jsx\n * <a href=\"#\">\n *   Learn more<VisuallyHidden> about the Solar System</VisuallyHidden>.\n * </a>\n * ```\n */\nexport function VisuallyHidden(props: VisuallyHiddenProps) {\n  const htmlProps = useVisuallyHidden(props);\n  return createInstance(TagName, htmlProps);\n}\n\nexport interface VisuallyHiddenOptions<\n  _T extends ValidComponent = TagName,\n> extends Options {}\n\nexport type VisuallyHiddenProps = Props<TagName, VisuallyHiddenOptions>;\n"],"mappings":";;AAIA,MAAM,UAAU;;;;;;;;;;;;;;AAgBhB,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,OAAO;CAChC,QAAQ,WACN,EACE,OAAO;EACL,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,UAAU;EACV,eAAe;EACf,OAAO;CACT,EACF,GACA,KACF;CACA,OAAO;AACT,CACF;;;;;;;;;;;;AAaA,SAAgB,eAAe,OAA4B;CAEzD,OAAO,eAAe,SADJ,kBAAkB,KACG,CAAC;AAC1C"}