@ariakit/solid-components 0.1.0

package/dist/heading/heading-level.js

@@ -0,0 +1,34 @@
+import { HeadingContext } from "./heading-context.js";
+import { createComponent } from "solid-js/web";
+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 createComponent(HeadingContext.Provider, {
+		value: nextLevel,
+		get children() {
+			return props.children;
+		}
+	});
+}
+//#endregion
+export { HeadingLevel };
+
+//# sourceMappingURL=heading-level.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heading-level.js","names":["JSX","useContext","HeadingContext","HeadingLevels","HeadingLevel","props","HeadingLevelProps","contextLevel","nextLevel","Math","max","min","level","_$createComponent","Provider","value","children","Element"],"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,SAAgBI,aAAaC,OAA0B;CACrD,MAAME,eAAeN,WAAWC,cAAc;CAC9C,MAAMM,kBACJC,KAAKC,IACHD,KAAKE,IAAIN,MAAMO,UAAUL,eAAe,KAAK,KAAK,GAAG,CAAC,GACtD,CACF;CACF,OAAAM,gBACGX,eAAeY,UAAQ;EAACC,OAAOP;EAAS,IAAAQ,WAAA;GAAA,OACtCX,MAAMW;EAAQ;CAAA,CAAA;AAGrB"}

package/dist/heading/heading.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","names":["Options","Props","ValidComponent","HeadingLevels","HeadingElements","TagName","useHeading","HeadingOptions","Hook","Heading","HeadingProps","props","JSX","Element","_T","T"],"sources":["../../src/heading/heading.d.ts"],"mappings":";;;;;KAGKI,eAAAA,OAAsBD,aAAa;AAAA,cAC1BE,OAAAA;AAAAA,KACTA,OAAAA,GAAUD,eAAe;;;;AAFU;AAAA;;;;AACnB;AAAA;;cAaAE,UAAAA,iCAA2CE,IAAAA,0CAA8CD,cAAc;;AAZ9F;AAY9B;;;;AAA4H;AAiB5H;;;;;;;;;cAAqBE,OAAAA,GAAUE,KAAAA,EAAOD,YAAY,wBAAwBE,GAAAA,CAAIC,OAAAA;AAAAA,UAC7DN,cAAAA,YAA0BL,cAAAA,GAAiBG,OAAAA,UAAiBL,OAAAA;AAAAA,KAEjEU,YAAAA,WAAuBR,cAAAA,GAAiBG,OAAAA,IAAWJ,KAAAA,CAAMc,CAAAA,EAAGR,cAAAA,CAAeQ,CAAAA"}

package/dist/heading/heading.js

@@ -0,0 +1,57 @@
+import { HeadingContext } from "./heading-context.js";
+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.js.map

package/dist/heading/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","names":["extractTagName","createRef","mergeProps","createHook","createInstance","Options","Props","ValidComponent","createMemo","useContext","HeadingContext","HeadingLevels","HeadingElements","TagName","HTMLType","HTMLElementTagNameMap","useHeading","HeadingOptions","props","ref","level","Element","const","tagName","get","isNativeHeading","test","render","role","undefined","aria-level","set","Heading","HeadingProps","htmlProps","T"],"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,MAAMa,UAAU;;;;;;;;;;;;AAehB,MAAaG,aAAab,WACxB,SAASa,WAAWE,OAAO;CACzB,MAAMC,MAAMlB,UAAoB;CAChC,MAAMmB,QAAQX,WAAWC,cAAc,YAAY;CACnD,MAAMW,gBAAgB,IAAID,MAAM;CAChC,MAAMG,UAAUvB,eAAemB,IAAIK,GAAG;CACtC,MAAMC,kBAAkBjB,iBAChB,CAAC,CAACe,QAAQ,KAAK,QAAQG,KAAKH,QAAQ,CAAE,CAC9C;CAEAL,QAAQhB,WACN;EAEEyB,QAAQN,QAAQ;EAChB,IAAIO,OAAO;GACT,OAAO,CAACH,gBAAgB,IAAI,YAAYI,KAAAA;EAC1C;EACA,IAAI,eAAe;GACjB,OAAO,CAACJ,gBAAgB,IAAIL,MAAM,IAAIS,KAAAA;EACxC;EACAV,KAAKA,IAAIY;CACX,GACAb,KACF;CAEA,OAAOA;AACT,CACF;;;;;;;;;;;;;;;;;AAkBA,MAAac,UAAU,SAASA,QAAQd,OAAqB;CAE3D,OAAOd,eAAeS,SADJG,WAAWE,KACEgB,CAAS;AAC1C"}

package/dist/heading/utils.d.ts

@@ -0,0 +1,5 @@
+//#region src/heading/utils.d.ts
+type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
+//#endregion
+export { HeadingLevels };
+//# sourceMappingURL=utils.d.ts.map

package/dist/heading/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":["HeadingLevels"],"sources":["../../src/heading/utils.d.ts"],"mappings":";KAAYA,aAAAA"}

package/dist/role/role.d.ts

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

package/dist/role/role.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"role.d.ts","names":["Options","Props","Component","ValidComponent","TagName","elements","RoleElements","K","RoleProps","useRole","RoleOptions","Hook","Role","_T","T"],"sources":["../../src/role/role.d.ts"],"mappings":";;;;cAEcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAAA,cACRC,QAAAA;AAAAA,KAChBC,YAAAA,mBACaD,QAAAA,YAAoBH,SAAAA,CAAUM,SAAAA,CAAUD,CAAAA;AAJrC;AAAA;;;;AACQ;AAC7B;;;AAFqB,cAeAE,OAAAA,iCAAwCE,IAAAA,QAAYD,WAAW;AAbuK;AAAC;;;;;;;;;AAAD,cAwBtOE,IAAAA,EAAMV,SAAAA,CAAUM,SAAAA,IAAaF,YAAAA;AAAAA,UACjCI,WAAAA,YAAuBP,cAAAA,GAAiBC,OAAAA,UAAiBJ,OAAAA;AAAAA,KAE9DQ,SAAAA,WAAoBL,cAAAA,GAAiBC,OAAAA,IAAWH,KAAAA,CAAMa,CAAAA,EAAGJ,WAAAA"}

package/dist/role/role.js

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

package/dist/role/role.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"role.js","names":["createHook","createInstance","Options","Props","Component","JSX","ValidComponent","TagName","elements","const","RoleElements","RoleProps","K","useRole","RoleOptions","props","Role","Element","Object","assign","reduce","acc","element","T"],"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,MAAMO,UAAU;AAGhB,MAAaC,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;AAAK;;;;;;;;;;AAgBP,MAAaK,UAAUb,WACrB,SAASa,QAAQE,OAAO;CACtB,OAAOA;AACT,CACF;;;;;;;;;;;AAaA,MAAaC,OAAO,SAASA,KAAKD,OAA+B;CAC/D,OAAOd,eAAeM,SAASQ,KAAK;AACtC;AAEAG,OAAOC,OACLH,MACAR,SAASY,QAAQC,KAAKC,YAAY;CAChCD,IAAIC,WAAW,SAASN,KACtBD,OACa;EACb,OAAOd,eAAeqB,SAASP,KAAK;CACtC;CACA,OAAOM;AACT,GAAG,CAAC,CAAiB,CACvB"}

package/dist/separator/separator.d.ts

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

package/dist/separator/separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","names":["Options","Props","ValidComponent","TagName","useSeparator","SeparatorOptions","Hook","Separator","SeparatorProps","props","JSX","Element","_T","orientation","T"],"sources":["../../src/separator/separator.d.ts"],"mappings":";;;;cAEcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkB;;;;AAC1B;AAAA;;;;AAD0B,cAY1BC,YAAAA,iCAA6CE,IAAAA,OAAWD,gBAAgB;AAA7F;;;;AAA6F;AAS7F;;;AATA,cASqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,wBAAwBE,GAAAA,CAAIC,OAAAA;AAAAA,UACjEN,gBAAAA,YAA4BH,cAAAA,GAAiBC,OAAAA,UAAiBH,OAAAA;EAD9CS;;;;EAM7BI,WAAAA;AAAAA;AAAAA,KAEQL,cAAAA,WAAyBN,cAAAA,GAAiBC,OAAAA,IAAWF,KAAAA,CAAMa,CAAAA,EAAGT,gBAAAA,CAAiBS,CAAAA"}

package/dist/separator/separator.js

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

package/dist/separator/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":["mergeProps","createHook","createInstance","withOptions","Options","Props","ValidComponent","TagName","useSeparator","SeparatorOptions","orientation","props","options","role","const","aria-orientation","Separator","SeparatorProps","htmlProps","T"],"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,MAAMO,UAAU;;;;;;;;;;AAYhB,MAAaC,eAAeP,WAC1BE,YACE,EAAEO,aAAa,aAAa,GAC5B,SAASF,aAAaG,OAAOC,SAAS;CACpCD,QAAQX,WACN;EACEa,MAAM;EACN,IAAI,qBAAqB;GACvB,OAAOD,QAAQF;EACjB;CACF,GACAC,KACF;CACA,OAAOA;AACT,CACF,CACF;;;;;;;;;AAUA,MAAaK,YAAY,SAASA,UAAUL,OAAuB;CAEjE,OAAOT,eAAeK,SADJC,aAAaG,KACAO,CAAS;AAC1C"}

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

@@ -0,0 +1,37 @@
+import { ValidComponent } from "solid-js";
+import { Options, Props } from "@ariakit/solid-utils";
+
+//#region src/visually-hidden/visually-hidden.d.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.com/components/visually-hidden
+ * @example
+ * ```jsx
+ * const props = useVisuallyHidden();
+ * <a href="#">
+ *   Learn more<Role {...props}> about the Solar System</Role>.
+ * </a>
+ * ```
+ */
+declare const useVisuallyHidden: import("@ariakit/solid-utils").Hook<"span", VisuallyHiddenOptions<"span">>;
+/**
+ * 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>
+ * ```
+ */
+declare function VisuallyHidden(props: VisuallyHiddenProps): import("solid-js").JSX.Element;
+interface VisuallyHiddenOptions<_T extends ValidComponent = TagName> extends Options {}
+type VisuallyHiddenProps = Props<TagName, VisuallyHiddenOptions>;
+//#endregion
+export { VisuallyHidden, VisuallyHiddenOptions, VisuallyHiddenProps, useVisuallyHidden };
+//# sourceMappingURL=visually-hidden.d.ts.map

package/dist/visually-hidden/visually-hidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.d.ts","names":["Options","Props","ValidComponent","TagName","useVisuallyHidden","VisuallyHiddenOptions","Hook","VisuallyHidden","VisuallyHiddenProps","props","JSX","Element","_T"],"sources":["../../src/visually-hidden/visually-hidden.d.ts"],"mappings":";;;;cAEcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkB;;;;AAC1B;AAAA;;;;AACQ;AAc7B;;;AAhB+C,cAgB1BC,iBAAAA,iCAAkDE,IAAAA,SAAaD,qBAAqB;AAAA;AAYzG;;;;;;;;;AAAkG;AAZO,iBAYjFE,cAAAA,CAAeE,KAAAA,EAAOD,mBAAmB,sBAAsBE,GAAAA,CAAIC,OAAAA;AAAAA,UAC1EN,qBAAAA,YAAiCH,cAAAA,GAAiBC,OAAAA,UAAiBH,OAAAA;AAAAA,KAExEQ,mBAAAA,GAAsBP,KAAAA,CAAME,OAAAA,EAASE,qBAAAA"}

package/dist/visually-hidden/visually-hidden.js

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

package/dist/visually-hidden/visually-hidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.js","names":["mergeProps","createHook","createInstance","Options","Props","ValidComponent","TagName","useVisuallyHidden","VisuallyHiddenOptions","props","style","border","clip","height","margin","overflow","padding","position","width","VisuallyHidden","VisuallyHiddenProps","htmlProps"],"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,MAAMM,UAAU;;;;;;;;;;;;;;AAgBhB,MAAaC,oBAAoBN,WAC/B,SAASM,kBAAkBE,OAAO;CAChCA,QAAQT,WACN,EACEU,OAAO;EACLC,QAAQ;EACRC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,SAAS;EACTC,UAAU;EACV,eAAe;EACfC,OAAO;CACT,EACF,GACAT,KACF;CACA,OAAOA;AACT,CACF;;;;;;;;;;;;AAaA,SAAgBU,eAAeV,OAA4B;CAEzD,OAAOP,eAAeI,SADJC,kBAAkBE,KACLY,CAAS;AAC1C"}

package/index.ts

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

package/license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present Ariakit FZ-LLC, 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.

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@ariakit/solid-components",
+  "version": "0.1.0",
+  "description": "Ariakit Solid components",
+  "keywords": [
+    "ariakit",
+    "solid",
+    "components"
+  ],
+  "homepage": "https://ariakit.com",
+  "license": "MIT",
+  "author": {
+    "name": "Dani Guardiola",
+    "email": "hi@daniguardio.la",
+    "url": "https://dio.la"
+  },
+  "contributors": [
+    {
+      "name": "Diego Haz",
+      "email": "hazdiego@gmail.com",
+      "url": "https://github.com/diegohaz"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ariakit/ariakit.git",
+    "directory": "packages/ariakit-solid-components"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "dependencies": {
+    "@ariakit/solid-utils": "0.1.0",
+    "@ariakit/utils": "0.1.0"
+  },
+  "devDependencies": {
+    "@ariakit/scripts": "0.0.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8"
+  },
+  "exports": {
+    "./as/as": {
+      "types": "./dist/as/as.d.ts",
+      "solid": "./solid/as/as.jsx",
+      "import": "./dist/as/as.js"
+    },
+    "./focus-trap/focus-trap": {
+      "types": "./dist/focus-trap/focus-trap.d.ts",
+      "solid": "./solid/focus-trap/focus-trap.jsx",
+      "import": "./dist/focus-trap/focus-trap.js"
+    },
+    "./focus-trap/focus-trap-region": {
+      "types": "./dist/focus-trap/focus-trap-region.d.ts",
+      "solid": "./solid/focus-trap/focus-trap-region.jsx",
+      "import": "./dist/focus-trap/focus-trap-region.js"
+    },
+    "./group/group": {
+      "types": "./dist/group/group.d.ts",
+      "solid": "./solid/group/group.jsx",
+      "import": "./dist/group/group.js"
+    },
+    "./group/group-label": {
+      "types": "./dist/group/group-label.d.ts",
+      "solid": "./solid/group/group-label.jsx",
+      "import": "./dist/group/group-label.js"
+    },
+    "./group/group-label-context": {
+      "types": "./dist/group/group-label-context.d.ts",
+      "solid": "./solid/group/group-label-context.jsx",
+      "import": "./dist/group/group-label-context.js"
+    },
+    "./heading/heading": {
+      "types": "./dist/heading/heading.d.ts",
+      "solid": "./solid/heading/heading.jsx",
+      "import": "./dist/heading/heading.js"
+    },
+    "./heading/heading-context": {
+      "types": "./dist/heading/heading-context.d.ts",
+      "solid": "./solid/heading/heading-context.jsx",
+      "import": "./dist/heading/heading-context.js"
+    },
+    "./heading/heading-level": {
+      "types": "./dist/heading/heading-level.d.ts",
+      "solid": "./solid/heading/heading-level.jsx",
+      "import": "./dist/heading/heading-level.js"
+    },
+    "./heading/utils": {
+      "types": "./dist/heading/utils.d.ts",
+      "solid": "./solid/heading/utils.jsx",
+      "import": "./dist/heading/utils.js"
+    },
+    "./role/role": {
+      "types": "./dist/role/role.d.ts",
+      "solid": "./solid/role/role.jsx",
+      "import": "./dist/role/role.js"
+    },
+    "./separator/separator": {
+      "types": "./dist/separator/separator.d.ts",
+      "solid": "./solid/separator/separator.jsx",
+      "import": "./dist/separator/separator.js"
+    },
+    "./visually-hidden/visually-hidden": {
+      "types": "./dist/visually-hidden/visually-hidden.d.ts",
+      "solid": "./solid/visually-hidden/visually-hidden.jsx",
+      "import": "./dist/visually-hidden/visually-hidden.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "ariakit build",
+    "clean": "ariakit clean"
+  }
+}

package/readme.md

@@ -0,0 +1,19 @@
+# Ariakit Solid Components
+
+**Important:** This package is an internal dependency of Ariakit and does not follow semantic versioning, meaning breaking changes may occur in patch and minor versions.
+
+## Installation
+
+```
+npm i @ariakit/solid-components
+```
+
+## Core Team
+
+- [Diego Haz](https://bsky.app/profile/haz.dev)
+- [Ben Rodri](https://bsky.app/profile/ben.ariakit.org)
+- [Dani Guardiola](https://bsky.app/profile/dio.la)
+
+## Contributing
+
+Follow the instructions on the [contributing guide](https://github.com/ariakit/ariakit/blob/main/contributing.md).