@ariakit/solid-components 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @ariakit/solid-components
+
+## 0.1.0
+
+### Added component packages
+
+The internal component packages are now available under these names:
+
+- `@ariakit/components`
+- `@ariakit/react-components`
+- `@ariakit/solid-components`
+
+### Other updates
+
+- Updated dependencies: `@ariakit/utils@0.1.0`, `@ariakit/solid-utils@0.1.0`
+
+## 0.0.0
+
+Initial release.

package/dist/as/as.d.ts

@@ -0,0 +1,30 @@
+import { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
+
+//#region src/as/as.d.ts
+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.com/guide/composition)
+ * guide for more details.
+ * @example
+ * ```jsx
+ * <Role render={<As component={MyButton} variant="primary" />} />
+ * <Role render={<As.button type="button" />} />
+ * ```
+ */
+declare const As: AsComponent & AsElements;
+type AsProps<T extends ValidComponent, P = ComponentProps<T>> = { [K in keyof P]: P[K] } & {
+  component: T;
+};
+//#endregion
+export { As, AsProps };
+//# sourceMappingURL=as.d.ts.map

package/dist/as/as.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"as.d.ts","names":["Component","ComponentProps","JSX","ValidComponent","AsElements","IntrinsicElements","K","AsComponent","T","P","AsProps","Element","props","As","component"],"sources":["../../src/as/as.d.ts"],"mappings":";;;KACKI,UAAAA,iBACWF,GAAAA,CAAIG,iBAAAA,GAAoBL,SAAAA,CAAUC,cAAAA,CAAeK,CAAAA;AAAAA,KAE5DC,WAAAA,cAAyBP,SAAAA,WAAoBC,cAAAA,CAAeO,CAAAA,GAAII,KAAAA,EAAOF,OAAAA,CAAQF,CAAAA,EAAGC,CAAAA,MAAOP,GAAAA,CAAIS,OAAAA;;;;;;;;;;;;;;;AAFhC;AAAA;;;cAqB7CE,EAAAA,EAAIN,WAAAA,GAAcH,UAAU;AAAA,KACrCM,OAAAA,WAAkBP,cAAAA,MAAoBF,cAAAA,CAAeO,CAAAA,mBACjDC,CAAAA,GAAIA,CAAAA,CAAEH,CAAAA;EAElBQ,SAAAA,EAAWN,CAAAA;AAAAA"}

package/dist/as/as.js

@@ -0,0 +1,40 @@
+import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { mergeProps as mergeProps$1 } from "@ariakit/solid-utils";
+//#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) => createComponent(Dynamic, mergeProps(() => mergeProps$1(parentProps, props), { get component() {
+		return props.component;
+	} })));
+}, { get: (_, key) => {
+	let component = cache.get(key);
+	if (!component) {
+		component = function AsElement(props) {
+			return ((parentProps) => createComponent(Dynamic, mergeProps(() => mergeProps$1(parentProps, props), { component: key })));
+		};
+		cache.set(key, component);
+	}
+	return component;
+} });
+//#endregion
+export { As };
+
+//# sourceMappingURL=as.js.map

package/dist/as/as.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"as.js","names":["mergeProps","Component","ComponentProps","JSX","ValidComponent","Dynamic","AsElements","IntrinsicElements","K","AsComponent","T","props","AsProps","P","Element","cache","Map","As","Proxy","parentProps","_$createComponent","_$mergeProps","component","get","_","key","AsElement","set"],"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,MAAMe,wBAAQ,IAAIC,IAA4B;;;;;;;;;;;;;;;;;;;AAoB9C,MAAaC,KAAK,IAAIC,MACpB,SAASD,GAAGN,OAAY;CACtB,SAASQ,gBACPC,gBACCf,SAAOgB,iBACFrB,aAAWmB,aAAaR,KAAK,GAAC,EAAA,IAClCW,YAAS;EAAA,OAAEX,MAAMW;CAAS,EAAA,CAAA,CAAA;AAGhC,GACA,EACEC,MAAMC,GAAGC,QAAqC;CAC5C,IAAIH,YAAYP,MAAMQ,IAAIE,GAAG;CAC7B,IAAI,CAACH,WAAW;EACdA,YAAY,SAASI,UAAUf,OAAyB;GACtD,SAASQ,gBACPC,gBACCf,SAAOgB,iBAAKrB,aAAWmB,aAAaR,KAAK,GAAC,EAAEW,WAAWG,IAAG,CAAA,CAAA;EAE/D;EACAV,MAAMY,IAAIF,KAAKH,SAAS;CAC1B;CACA,OAAOA;AACT,EACF,CACF"}

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

@@ -0,0 +1,42 @@
+import { ValidComponent } from "solid-js";
+import { Options, Props } from "@ariakit/solid-utils";
+
+//#region src/focus-trap/focus-trap-region.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FocusTrapRegion` component.
+ * @see https://solid.ariakit.com/components/focus-trap-region
+ * @example
+ * ```jsx
+ * const props = useFocusTrapRegion();
+ * <Role {...props} />
+ * ```
+ */
+declare const useFocusTrapRegion: import("@ariakit/solid-utils").Hook<"div", FocusTrapRegionOptions<"div">>;
+/**
+ * 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>
+ * ```
+ */
+declare const FocusTrapRegion: (props: FocusTrapRegionProps) => import("solid-js").JSX.Element;
+interface FocusTrapRegionOptions<_T extends ValidComponent = TagName> extends Options {
+  /**
+   * If true, it will trap the focus in the region.
+   * @default false
+   */
+  enabled?: boolean;
+}
+type FocusTrapRegionProps<T extends ValidComponent = TagName> = Props<T, FocusTrapRegionOptions<T>>;
+//#endregion
+export { FocusTrapRegion, FocusTrapRegionOptions, FocusTrapRegionProps, useFocusTrapRegion };
+//# sourceMappingURL=focus-trap-region.d.ts.map

package/dist/focus-trap/focus-trap-region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap-region.d.ts","names":["Options","Props","ValidComponent","TagName","useFocusTrapRegion","FocusTrapRegionOptions","Hook","FocusTrapRegion","FocusTrapRegionProps","props","JSX","Element","_T","enabled","T"],"sources":["../../src/focus-trap/focus-trap-region.d.ts"],"mappings":";;;;cAEcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkB;;;;AAC1B;AAAA;;;;AAD0B,cAY1BC,kBAAAA,iCAAmDE,IAAAA,QAAYD,sBAAsB;AAA1G;;;;AAA0G;AAe1G;;;;;;;;;AAfA,cAeqBE,eAAAA,GAAkBE,KAAAA,EAAOD,oBAAoB,wBAAwBE,GAAAA,CAAIC,OAAAA;AAAAA,UAC7EN,sBAAAA,YAAkCH,cAAAA,GAAiBC,OAAAA,UAAiBH,OAAAA;EAA9C;;;;EAKnCa,OAAAA;AAAAA;AAAAA,KAEQL,oBAAAA,WAA+BN,cAAAA,GAAiBC,OAAAA,IAAWF,KAAAA,CAAMa,CAAAA,EAAGT,sBAAAA,CAAuBS,CAAAA"}

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

@@ -0,0 +1,71 @@
+import { FocusTrap } from "./focus-trap.js";
+import { createComponent, memo } from "solid-js/web";
+import { createHook, createInstance, createRef, mergeProps as mergeProps$1, 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 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?.focus();
+						else first?.focus();
+					} });
+				}
+			});
+		};
+		return [
+			memo(renderFocusTrap),
+			memo(() => wrapperProps.children),
+			memo(renderFocusTrap)
+		];
+	});
+	props = mergeProps$1({ 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.js.map

package/dist/focus-trap/focus-trap-region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap-region.js","names":["createRef","mergeProps","createHook","createInstance","withOptions","wrapInstance","Options","Props","getAllTabbableIn","ValidComponent","Show","FocusTrap","TagName","HTMLType","HTMLElementTagNameMap","useFocusTrapRegion","FocusTrapRegionOptions","enabled","props","options","ref","wrapperProps","renderFocusTrap","_$createComponent","when","children","onFocus","event","container","current","tabbables","first","last","length","focus","relatedTarget","_$memo","set","FocusTrapRegion","FocusTrapRegionProps","htmlProps","T"],"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,MAAMY,UAAU;;;;;;;;;;AAahB,MAAaG,qBAAqBb,WAChCE,YAAY,EAAEa,SAAS,MAAM,GAAG,SAASF,mBAAmBG,OAAOC,SAAS;CAC1E,MAAMC,MAAMpB,UAAoB;CAEhCkB,QAAQb,aAAaa,QAAQG,iBAAiB;EAC5C,MAAMC,wBAAwB;GAC5B,OAAAC,gBACGb,MAAI;IAAA,IAACc,OAAI;KAAA,OAAEL,QAAQF;IAAO;IAAA,IAAAQ,WAAA;KAAA,OAAAF,gBACxBZ,WAAS,EACRe,UAAUC,UAAU;MAElB,MAAMC,YAAYR,IAAIS;MACtB,IAAI,CAACD,WAAW;MAChB,MAAME,YAAYtB,iBAAiBoB,WAAW,IAAI;MAClD,MAAMG,QAAQD,UAAU;MACxB,MAAME,OAAOF,UAAUA,UAAUG,SAAS;MAE1C,IAAI,CAACH,UAAUG,QAAQ;OACrBL,UAAUM,MAAM;OAChB;MACF;MACA,IAAIP,MAAMQ,kBAAkBJ,OAC1BC,MAAME,MAAM;WAEZH,OAAOG,MAAM;KAEjB,EAAC,CAAA;IAAA;GAAA,CAAA;EAIT;EACA,OAAA;GAAAE,KAEKd,eAAe;GAAAc,WACff,aAAaI,QAAQ;GAAAW,KACrBd,eAAe;EAAA;CAGtB,CAAC;CAEDJ,QAAQjB,aAAW,EAAEmB,KAAKA,IAAIiB,IAAI,GAAGnB,KAAK;CAE1C,OAAOA;AACT,CAAC,CACH;;;;;;;;;;;;;;;AAgBA,MAAaoB,kBAAkB,SAASA,gBACtCpB,OACA;CAEA,OAAOf,eAAeS,SADJG,mBAAmBG,KACNsB,CAAS;AAC1C"}

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

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

package/dist/focus-trap/focus-trap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap.d.ts","names":["Props","ValidComponent","VisuallyHiddenOptions","TagName","useFocusTrap","FocusTrapOptions","Hook","FocusTrap","FocusTrapProps","props","JSX","Element","T"],"sources":["../../src/focus-trap/focus-trap.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFuD;;;;AAC/D;AAAA;;;;AAD+D,cAY/DC,YAAAA,iCAA6CE,IAAAA,SAAaD,gBAAgB;AAA/F;;;;AAA+F;AAS/F;;;AATA,iBASwBE,SAAAA,CAAUE,KAAAA,EAAOD,cAAc,sBAAsBE,GAAAA,CAAIC,OAAAA;AAAAA,KACrEN,gBAAAA,WAA2BJ,cAAAA,GAAiBE,OAAAA,IAAWD,qBAAAA,CAAsBU,CAAAA;AAAAA,KAC7EJ,cAAAA,WAAyBP,cAAAA,GAAiBE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/focus-trap/focus-trap.js

@@ -0,0 +1,42 @@
+import { useVisuallyHidden } from "../visually-hidden/visually-hidden.js";
+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.js.map

package/dist/focus-trap/focus-trap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap.js","names":["mergeProps","createHook","createInstance","Props","ValidComponent","VisuallyHiddenOptions","useVisuallyHidden","TagName","useFocusTrap","FocusTrapOptions","props","tabIndex","style","position","top","left","FocusTrap","FocusTrapProps","htmlProps","T"],"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,MAAMO,UAAU;;;;;;;;;;AAYhB,MAAaC,eAAeP,WAC1B,SAASO,aAAaE,OAAO;CAC3BA,QAAQV,WACN;EACE,mBAAmB;EACnBW,UAAU;EACV,eAAe;EACfC,OAAO;GAELC,UAAU;GACVC,KAAK;GACLC,MAAM;EACR;CACF,GACAL,KACF;CAEAA,QAAQJ,kBAAkBI,KAAK;CAE/B,OAAOA;AACT,CACF;;;;;;;;;AAUA,SAAgBM,UAAUN,OAAuB;CAE/C,OAAOR,eAAeK,SADJC,aAAaE,KACAQ,CAAS;AAC1C"}

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

@@ -0,0 +1,7 @@
+import { Setter } from "solid-js";
+
+//#region src/group/group-label-context.d.ts
+declare const GroupLabelContext: import("solid-js").Context<Setter<string | undefined> | undefined>;
+//#endregion
+export { GroupLabelContext };
+//# sourceMappingURL=group-label-context.d.ts.map

package/dist/group/group-label-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-label-context.d.ts","names":["Setter","GroupLabelContext","Context"],"sources":["../../src/group/group-label-context.d.ts"],"mappings":";;;cACqBC,iBAAAA,qBAAsCC,OAAAA,CAAQF,MAAM"}

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

@@ -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.js.map

package/dist/group/group-label-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-label-context.js","names":["Setter","createContext","GroupLabelContext"],"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,MAAaE,oBAAoBD,cAA0C"}

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

@@ -0,0 +1,37 @@
+import { ValidComponent } from "solid-js";
+import { Options, Props } from "@ariakit/solid-utils";
+
+//#region src/group/group-label.d.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.com/components/group
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Group
+ * const props = useGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+declare const useGroupLabel: import("@ariakit/solid-utils").Hook<"div", GroupLabelOptions<"div">>;
+/**
+ * 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>
+ * ```
+ */
+declare const GroupLabel: (props: GroupLabelProps) => import("solid-js").JSX.Element;
+interface GroupLabelOptions<_T extends ValidComponent = TagName> extends Options {}
+type GroupLabelProps<T extends ValidComponent = TagName> = Props<T, GroupLabelOptions<T>>;
+//#endregion
+export { GroupLabel, GroupLabelOptions, GroupLabelProps, useGroupLabel };
+//# sourceMappingURL=group-label.d.ts.map

package/dist/group/group-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-label.d.ts","names":["Options","Props","ValidComponent","TagName","useGroupLabel","GroupLabelOptions","Hook","GroupLabel","GroupLabelProps","props","JSX","Element","_T","T"],"sources":["../../src/group/group-label.d.ts"],"mappings":";;;;cAEcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkB;;;;AAC1B;AAAA;;;;AACQ;AAa7B;;AAf+C,cAe1BC,aAAAA,iCAA8CE,IAAAA,QAAYD,iBAAiB;;AAAA;AAahG;;;;;;;;;AAA2F;cAAtEE,UAAAA,GAAaE,KAAAA,EAAOD,eAAe,wBAAwBE,GAAAA,CAAIC,OAAAA;AAAAA,UACnEN,iBAAAA,YAA6BH,cAAAA,GAAiBC,OAAAA,UAAiBH,OAAAA;AAAAA,KAEpEQ,eAAAA,WAA0BN,cAAAA,GAAiBC,OAAAA,IAAWF,KAAAA,CAAMY,CAAAA,EAAGR,iBAAAA,CAAkBQ,CAAAA"}

package/dist/group/group-label.js

@@ -0,0 +1,51 @@
+import { GroupLabelContext } from "./group-label-context.js";
+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.js.map

package/dist/group/group-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-label.js","names":["createId","mergeProps","stableAccessor","createHook","createInstance","Options","Props","ValidComponent","createEffect","onCleanup","useContext","GroupLabelContext","TagName","useGroupLabel","GroupLabelOptions","props","setLabelId","id","p","undefined","GroupLabel","GroupLabelProps","htmlProps","T"],"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,MAAMY,UAAU;;;;;;;;;;;;;AAehB,MAAaC,gBAAgBV,WAC3B,SAASU,cAAcE,OAAO;CAC5B,MAAMC,aAAaN,WAAWC,iBAAiB;CAC/C,MAAMM,KAAKjB,SAASE,eAAea,QAAQG,MAAMA,EAAED,EAAE,CAAC;CAEtDT,mBAAmB;EACjBQ,aAAaC,GAAG,CAAC;EACjBR,gBAAgBO,aAAaG,KAAAA,CAAS,CAAC;CACzC,CAAC;CAEDJ,QAAQd,WACN;EACE,IAAIgB,KAAK;GACP,OAAOA,GAAG;EACZ;EACA,eAAe;CACjB,GACAF,KACF;CAEA,OAAOA;AACT,CACF;;;;;;;;;;;;;AAcA,MAAaK,aAAa,SAASA,WAAWL,OAAwB;CAEpE,OAAOX,eAAeQ,SADJC,cAAcE,KACDO,CAAS;AAC1C"}

package/dist/group/group.d.ts

@@ -0,0 +1,32 @@
+import { ValidComponent } from "solid-js";
+import { Options, Props } from "@ariakit/solid-utils";
+
+//#region src/group/group.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Group` component.
+ * @see https://solid.ariakit.com/components/group
+ * @example
+ * ```jsx
+ * const props = useGroup();
+ * <Role {...props}>Group</Role>
+ * ```
+ */
+declare const useGroup: import("@ariakit/solid-utils").Hook<"div", Options>;
+/**
+ * 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>
+ * ```
+ */
+declare const Group: (props: GroupProps) => import("solid-js").JSX.Element;
+type GroupOptions<_T extends ValidComponent = TagName> = Options;
+type GroupProps<T extends ValidComponent = TagName> = Props<T, GroupOptions<T>>;
+//#endregion
+export { Group, GroupOptions, GroupProps, useGroup };
+//# sourceMappingURL=group.d.ts.map

package/dist/group/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","names":["Options","Props","ValidComponent","TagName","useGroup","Hook","Group","GroupProps","props","JSX","Element","GroupOptions","_T","T"],"sources":["../../src/group/group.d.ts"],"mappings":";;;;cAEcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkB;;;;AAC1B;AAAA;;;;AAD0B,cAY1BC,QAAAA,iCAAyCC,IAAAA,QAAYL,OAAO;AAAjF;;;;AAAiF;AAWjF;;;;;AAXA,cAWqBM,KAAAA,GAAQE,KAAAA,EAAOD,UAAU,wBAAwBE,GAAAA,CAAIC,OAAAA;AAAAA,KAC9DC,YAAAA,YAAwBT,cAAAA,GAAiBC,OAAAA,IAAWH,OAAAA;AAAAA,KACpDO,UAAAA,WAAqBL,cAAAA,GAAiBC,OAAAA,IAAWF,KAAAA,CAAMY,CAAAA,EAAGF,YAAAA,CAAaE,CAAAA"}

package/dist/group/group.js

@@ -0,0 +1,49 @@
+import { As } from "../as/as.js";
+import { GroupLabelContext } from "./group-label-context.js";
+import { createComponent } from "solid-js/web";
+import { createHook, createInstance, mergeProps as mergeProps$1, 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, createComponent(As, {
+		get component() {
+			return GroupLabelContext.Provider;
+		},
+		value: setLabelId
+	}));
+	props = mergeProps$1({
+		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.js.map

package/dist/group/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":["mergeProps","createHook","createInstance","wrapInstance","Options","Props","ValidComponent","createSignal","As","GroupLabelContext","TagName","useGroup","GroupOptions","props","labelId","setLabelId","_$createComponent","component","Provider","value","role","const","aria-labelledby","Group","GroupProps","htmlProps","T"],"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,MAAMU,UAAU;;;;;;;;;;AAYhB,MAAaC,WAAWV,WACtB,SAASU,SAASE,OAAO;CACvB,MAAM,CAACC,SAASC,cAAcR,aAAqB;CAEnDM,QAAQV,aACNU,OAAKG,gBACJR,IAAE;EAAA,IAACS,YAAS;GAAA,OAAER,kBAAkBS;EAAQ;EAAEC,OAAOJ;CAAU,CAAA,CAC9D;CAEAF,QAAQb,aACN;EACEoB,MAAM;EACN,IAAI,oBAAoB;GACtB,OAAON,QAAQ;EACjB;CACF,GACAD,KACF;CAEA,OAAOA;AACT,CACF;;;;;;;;;;;AAYA,MAAaU,QAAQ,SAASA,MAAMV,OAAmB;CAErD,OAAOX,eAAeQ,SADJC,SAASE,KACIY,CAAS;AAC1C"}

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

@@ -0,0 +1,8 @@
+import { HeadingLevels } from "./utils.js";
+import { Accessor } from "solid-js";
+
+//#region src/heading/heading-context.d.ts
+declare const HeadingContext: import("solid-js").Context<Accessor<HeadingLevels> | undefined>;
+//#endregion
+export { HeadingContext };
+//# sourceMappingURL=heading-context.d.ts.map

package/dist/heading/heading-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-context.d.ts","names":["Accessor","HeadingLevels","HeadingContext","Context"],"sources":["../../src/heading/heading-context.d.ts"],"mappings":";;;;cAEqBE,cAAAA,qBAAmCC,OAAAA,CAAQH,QAAQ,CAACC,aAAAA"}

package/dist/heading/heading-context.js

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

package/dist/heading/heading-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-context.js","names":["Accessor","createContext","HeadingLevels","HeadingContext"],"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,MAAaG,iBAAiBF,cAAuC"}

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

@@ -0,0 +1,32 @@
+import { HeadingLevels } from "./utils.js";
+import { JSX } from "solid-js";
+
+//#region src/heading/heading-level.d.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.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>
+ * ```
+ */
+declare function HeadingLevel(props: HeadingLevelProps): JSX.Element;
+interface HeadingLevelProps {
+  /**
+   * The heading level. By default, it'll increase the level by 1 based on the
+   * context.
+   */
+  level?: HeadingLevels;
+  children?: JSX.Element;
+}
+//#endregion
+export { HeadingLevel, HeadingLevelProps };
+//# sourceMappingURL=heading-level.d.ts.map

package/dist/heading/heading-level.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-level.d.ts","names":["JSX","HeadingLevels","HeadingLevel","HeadingLevelProps","Element","props","level","children"],"sources":["../../src/heading/heading-level.d.ts"],"mappings":";;;;;;AAkBA;;;;;;;;;AAA2E;AAC3E;;;;iBADwBE,YAAAA,CAAaG,KAAAA,EAAOF,iBAAAA,GAAoBH,GAAAA,CAAII,OAAO;AAAA,UAC1DD,iBAAAA;EAMbI;;;;EADAD,KAAAA,GAAQL,aAAAA;EACRM,QAAAA,GAAWP,GAAAA,CAAII,OAAO;AAAA"}