@ariakit/solid-core 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/as/as/package.json +8 -0
  3. package/cjs/__chunks/53WPOLZU.cjs +7 -0
  4. package/cjs/__chunks/AUGTJ473.cjs +7 -0
  5. package/cjs/__chunks/GVOD7RTZ.cjs +21 -0
  6. package/cjs/__chunks/JFCGWMZC.cjs +35 -0
  7. package/cjs/__chunks/RLO4RIGL.cjs +42 -0
  8. package/cjs/__chunks/T5IUBZJK.cjs +39 -0
  9. package/cjs/__chunks/V3ZEI37L.cjs +61 -0
  10. package/cjs/__chunks/V5YR7HBG.cjs +37 -0
  11. package/cjs/as/as.cjs +7 -0
  12. package/cjs/as/as.d.cts +30 -0
  13. package/cjs/as/as.d.ts +30 -0
  14. package/cjs/focus-trap/focus-trap-region.cjs +68 -0
  15. package/cjs/focus-trap/focus-trap-region.d.cts +38 -0
  16. package/cjs/focus-trap/focus-trap-region.d.ts +38 -0
  17. package/cjs/focus-trap/focus-trap.cjs +11 -0
  18. package/cjs/focus-trap/focus-trap.d.cts +27 -0
  19. package/cjs/focus-trap/focus-trap.d.ts +27 -0
  20. package/cjs/group/group-label-context.cjs +6 -0
  21. package/cjs/group/group-label-context.d.cts +2 -0
  22. package/cjs/group/group-label-context.d.ts +2 -0
  23. package/cjs/group/group-label.cjs +41 -0
  24. package/cjs/group/group-label.d.cts +34 -0
  25. package/cjs/group/group-label.d.ts +34 -0
  26. package/cjs/group/group.cjs +43 -0
  27. package/cjs/group/group.d.cts +28 -0
  28. package/cjs/group/group.d.ts +28 -0
  29. package/cjs/heading/heading-context.cjs +6 -0
  30. package/cjs/heading/heading-context.d.cts +3 -0
  31. package/cjs/heading/heading-context.d.ts +3 -0
  32. package/cjs/heading/heading-level.cjs +23 -0
  33. package/cjs/heading/heading-level.d.cts +27 -0
  34. package/cjs/heading/heading-level.d.ts +27 -0
  35. package/cjs/heading/heading.cjs +45 -0
  36. package/cjs/heading/heading.d.cts +39 -0
  37. package/cjs/heading/heading.d.ts +39 -0
  38. package/cjs/heading/utils.cjs +1 -0
  39. package/cjs/heading/utils.d.cts +1 -0
  40. package/cjs/heading/utils.d.ts +1 -0
  41. package/cjs/role/role.cjs +26 -0
  42. package/cjs/role/role.d.cts +33 -0
  43. package/cjs/role/role.d.ts +33 -0
  44. package/cjs/separator/separator.cjs +30 -0
  45. package/cjs/separator/separator.d.cts +32 -0
  46. package/cjs/separator/separator.d.ts +32 -0
  47. package/cjs/utils/misc.cjs +8 -0
  48. package/cjs/utils/misc.d.cts +16 -0
  49. package/cjs/utils/misc.d.ts +16 -0
  50. package/cjs/utils/reactivity.cjs +12 -0
  51. package/cjs/utils/reactivity.d.cts +109 -0
  52. package/cjs/utils/reactivity.d.ts +109 -0
  53. package/cjs/utils/system.cjs +13 -0
  54. package/cjs/utils/system.d.cts +45 -0
  55. package/cjs/utils/system.d.ts +45 -0
  56. package/cjs/utils/types.cjs +1 -0
  57. package/cjs/utils/types.d.cts +56 -0
  58. package/cjs/utils/types.d.ts +56 -0
  59. package/cjs/visually-hidden/visually-hidden.cjs +10 -0
  60. package/cjs/visually-hidden/visually-hidden.d.cts +34 -0
  61. package/cjs/visually-hidden/visually-hidden.d.ts +34 -0
  62. package/esm/__chunks/I7JSIDPD.js +7 -0
  63. package/esm/__chunks/ILGMKAYU.js +37 -0
  64. package/esm/__chunks/NX66AMGW.js +39 -0
  65. package/esm/__chunks/OKOFCLOZ.js +61 -0
  66. package/esm/__chunks/QKOHDUFI.js +42 -0
  67. package/esm/__chunks/SFKMELHD.js +35 -0
  68. package/esm/__chunks/UKDBTPK5.js +21 -0
  69. package/esm/__chunks/VOWRNGOM.js +7 -0
  70. package/esm/as/as.d.ts +30 -0
  71. package/esm/as/as.js +7 -0
  72. package/esm/focus-trap/focus-trap-region.d.ts +38 -0
  73. package/esm/focus-trap/focus-trap-region.js +68 -0
  74. package/esm/focus-trap/focus-trap.d.ts +27 -0
  75. package/esm/focus-trap/focus-trap.js +11 -0
  76. package/esm/group/group-label-context.d.ts +2 -0
  77. package/esm/group/group-label-context.js +6 -0
  78. package/esm/group/group-label.d.ts +34 -0
  79. package/esm/group/group-label.js +41 -0
  80. package/esm/group/group.d.ts +28 -0
  81. package/esm/group/group.js +43 -0
  82. package/esm/heading/heading-context.d.ts +3 -0
  83. package/esm/heading/heading-context.js +6 -0
  84. package/esm/heading/heading-level.d.ts +27 -0
  85. package/esm/heading/heading-level.js +23 -0
  86. package/esm/heading/heading.d.ts +39 -0
  87. package/esm/heading/heading.js +45 -0
  88. package/esm/heading/utils.d.ts +1 -0
  89. package/esm/heading/utils.js +0 -0
  90. package/esm/role/role.d.ts +33 -0
  91. package/esm/role/role.js +26 -0
  92. package/esm/separator/separator.d.ts +32 -0
  93. package/esm/separator/separator.js +30 -0
  94. package/esm/utils/misc.d.ts +16 -0
  95. package/esm/utils/misc.js +8 -0
  96. package/esm/utils/reactivity.d.ts +109 -0
  97. package/esm/utils/reactivity.js +12 -0
  98. package/esm/utils/system.d.ts +45 -0
  99. package/esm/utils/system.js +13 -0
  100. package/esm/utils/types.d.ts +56 -0
  101. package/esm/utils/types.js +0 -0
  102. package/esm/visually-hidden/visually-hidden.d.ts +34 -0
  103. package/esm/visually-hidden/visually-hidden.js +10 -0
  104. package/focus-trap/focus-trap/package.json +8 -0
  105. package/focus-trap/focus-trap-region/package.json +8 -0
  106. package/group/group/package.json +8 -0
  107. package/group/group-label/package.json +8 -0
  108. package/group/group-label-context/package.json +8 -0
  109. package/heading/heading/package.json +8 -0
  110. package/heading/heading-context/package.json +8 -0
  111. package/heading/heading-level/package.json +8 -0
  112. package/heading/utils/package.json +8 -0
  113. package/index.ts +1 -0
  114. package/license +21 -0
  115. package/package.json +181 -6
  116. package/readme.md +22 -0
  117. package/role/role/package.json +8 -0
  118. package/separator/separator/package.json +8 -0
  119. package/solid/__chunks/ALJQAVR2.jsx +42 -0
  120. package/solid/__chunks/HBI7B4XO.jsx +52 -0
  121. package/solid/__chunks/HUX7TBVM.jsx +37 -0
  122. package/solid/__chunks/KXVBEYOF.jsx +21 -0
  123. package/solid/__chunks/O5QTZ2VS.jsx +42 -0
  124. package/solid/__chunks/PIGECGWJ.jsx +40 -0
  125. package/solid/__chunks/TCHPU5P4.jsx +7 -0
  126. package/solid/__chunks/VAA446IN.jsx +7 -0
  127. package/solid/as/as.jsx +7 -0
  128. package/solid/focus-trap/focus-trap-region.jsx +63 -0
  129. package/solid/focus-trap/focus-trap.jsx +11 -0
  130. package/solid/group/group-label-context.jsx +6 -0
  131. package/solid/group/group-label.jsx +50 -0
  132. package/solid/group/group.jsx +45 -0
  133. package/solid/heading/heading-context.jsx +6 -0
  134. package/solid/heading/heading-level.jsx +22 -0
  135. package/solid/heading/heading.jsx +52 -0
  136. package/solid/heading/utils.jsx +0 -0
  137. package/solid/role/role.jsx +59 -0
  138. package/solid/separator/separator.jsx +36 -0
  139. package/solid/utils/misc.jsx +8 -0
  140. package/solid/utils/reactivity.jsx +12 -0
  141. package/solid/utils/system.jsx +13 -0
  142. package/solid/utils/types.jsx +0 -0
  143. package/solid/visually-hidden/visually-hidden.jsx +10 -0
  144. package/tsconfig.build.json +4 -0
  145. package/utils/misc/package.json +8 -0
  146. package/utils/reactivity/package.json +8 -0
  147. package/utils/system/package.json +8 -0
  148. package/utils/types/package.json +8 -0
  149. package/visually-hidden/visually-hidden/package.json +8 -0
@@ -0,0 +1,34 @@
1
+ import { type ValidComponent } from "solid-js";
2
+ import type { Options, Props } from "../utils/types.ts";
3
+ declare const TagName = "div";
4
+ type TagName = typeof TagName;
5
+ /**
6
+ * Returns props to create a `GroupLabel` component. This hook must be used in a
7
+ * component that's wrapped with `Group` so the `aria-labelledby` prop is
8
+ * properly set on the group element.
9
+ * @see https://solid.ariakit.org/components/group
10
+ * @example
11
+ * ```jsx
12
+ * // This component must be wrapped with Group
13
+ * const props = useGroupLabel();
14
+ * <Role {...props}>Label</Role>
15
+ * ```
16
+ */
17
+ export declare const useGroupLabel: import("../utils/types.ts").Hook<"div", GroupLabelOptions<"div">>;
18
+ /**
19
+ * Renders a label in a group. This component should be wrapped with a
20
+ * [`Group`](https://solid.ariakit.org/reference/group) so the `aria-labelledby`
21
+ * prop is correctly set on the group element.
22
+ * @see https://solid.ariakit.org/components/group
23
+ * @example
24
+ * ```jsx
25
+ * <Group>
26
+ * <GroupLabel>Label</GroupLabel>
27
+ * </Group>
28
+ * ```
29
+ */
30
+ export declare const GroupLabel: (props: GroupLabelProps) => import("solid-js").JSX.Element;
31
+ export interface GroupLabelOptions<_T extends ValidComponent = TagName> extends Options {
32
+ }
33
+ export type GroupLabelProps<T extends ValidComponent = TagName> = Props<T, GroupLabelOptions<T>>;
34
+ export {};
@@ -0,0 +1,43 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+ var _T5IUBZJKcjs = require('../__chunks/T5IUBZJK.cjs');
4
+
5
+
6
+ var _53WPOLZUcjs = require('../__chunks/53WPOLZU.cjs');
7
+
8
+
9
+
10
+
11
+ var _V3ZEI37Lcjs = require('../__chunks/V3ZEI37L.cjs');
12
+
13
+
14
+ var _RLO4RIGLcjs = require('../__chunks/RLO4RIGL.cjs');
15
+
16
+ // src/group/group.tsx
17
+ var _web = require('solid-js/web');
18
+ var _solidjs = require('solid-js');
19
+ var TagName = "div";
20
+ var useGroup = _V3ZEI37Lcjs.createHook.call(void 0, function useGroup2(props) {
21
+ const [labelId, setLabelId] = _solidjs.createSignal.call(void 0, );
22
+ props = _V3ZEI37Lcjs.wrapInstance.call(void 0, props, _web.createComponent.call(void 0, _T5IUBZJKcjs.As, {
23
+ get component() {
24
+ return _53WPOLZUcjs.GroupLabelContext.Provider;
25
+ },
26
+ value: setLabelId
27
+ }));
28
+ props = _RLO4RIGLcjs.mergeProps.call(void 0, {
29
+ role: "group",
30
+ get "aria-labelledby"() {
31
+ return labelId();
32
+ }
33
+ }, props);
34
+ return props;
35
+ });
36
+ var Group = function Group2(props) {
37
+ const htmlProps = useGroup(props);
38
+ return _V3ZEI37Lcjs.createInstance.call(void 0, TagName, htmlProps);
39
+ };
40
+
41
+
42
+
43
+ exports.Group = Group; exports.useGroup = useGroup;
@@ -0,0 +1,28 @@
1
+ import { type ValidComponent } from "solid-js";
2
+ import type { Options, Props } from "../utils/types.ts";
3
+ declare const TagName = "div";
4
+ type TagName = typeof TagName;
5
+ /**
6
+ * Returns props to create a `Group` component.
7
+ * @see https://solid.ariakit.org/components/group
8
+ * @example
9
+ * ```jsx
10
+ * const props = useGroup();
11
+ * <Role {...props}>Group</Role>
12
+ * ```
13
+ */
14
+ export declare const useGroup: import("../utils/types.ts").Hook<"div", Options>;
15
+ /**
16
+ * Renders a group element. Optionally, a
17
+ * [`GroupLabel`](https://solid.ariakit.org/reference/group-label) can be rendered as
18
+ * a child to provide a label for the group.
19
+ * @see https://solid.ariakit.org/components/group
20
+ * @example
21
+ * ```jsx
22
+ * <Group>Group</Group>
23
+ * ```
24
+ */
25
+ export declare const Group: (props: GroupProps) => import("solid-js").JSX.Element;
26
+ export type GroupOptions<_T extends ValidComponent = TagName> = Options;
27
+ export type GroupProps<T extends ValidComponent = TagName> = Props<T, GroupOptions<T>>;
28
+ export {};
@@ -0,0 +1,28 @@
1
+ import { type ValidComponent } from "solid-js";
2
+ import type { Options, Props } from "../utils/types.ts";
3
+ declare const TagName = "div";
4
+ type TagName = typeof TagName;
5
+ /**
6
+ * Returns props to create a `Group` component.
7
+ * @see https://solid.ariakit.org/components/group
8
+ * @example
9
+ * ```jsx
10
+ * const props = useGroup();
11
+ * <Role {...props}>Group</Role>
12
+ * ```
13
+ */
14
+ export declare const useGroup: import("../utils/types.ts").Hook<"div", Options>;
15
+ /**
16
+ * Renders a group element. Optionally, a
17
+ * [`GroupLabel`](https://solid.ariakit.org/reference/group-label) can be rendered as
18
+ * a child to provide a label for the group.
19
+ * @see https://solid.ariakit.org/components/group
20
+ * @example
21
+ * ```jsx
22
+ * <Group>Group</Group>
23
+ * ```
24
+ */
25
+ export declare const Group: (props: GroupProps) => import("solid-js").JSX.Element;
26
+ export type GroupOptions<_T extends ValidComponent = TagName> = Options;
27
+ export type GroupProps<T extends ValidComponent = TagName> = Props<T, GroupOptions<T>>;
28
+ export {};
@@ -0,0 +1,6 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+ var _AUGTJ473cjs = require('../__chunks/AUGTJ473.cjs');
4
+
5
+
6
+ exports.HeadingContext = _AUGTJ473cjs.HeadingContext;
@@ -0,0 +1,3 @@
1
+ import { type Accessor } from "solid-js";
2
+ import type { HeadingLevels } from "./utils.ts";
3
+ export declare const HeadingContext: import("solid-js").Context<Accessor<HeadingLevels> | undefined>;
@@ -0,0 +1,3 @@
1
+ import { type Accessor } from "solid-js";
2
+ import type { HeadingLevels } from "./utils.ts";
3
+ export declare const HeadingContext: import("solid-js").Context<Accessor<HeadingLevels> | undefined>;
@@ -0,0 +1,23 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+ var _AUGTJ473cjs = require('../__chunks/AUGTJ473.cjs');
4
+
5
+ // src/heading/heading-level.tsx
6
+ var _web = require('solid-js/web');
7
+ var _solidjs = require('solid-js');
8
+ function HeadingLevel(props) {
9
+ const contextLevel = _solidjs.useContext.call(void 0, _AUGTJ473cjs.HeadingContext);
10
+ const nextLevel = () => {
11
+ var _a;
12
+ return Math.max(Math.min(props.level || ((_a = contextLevel == null ? void 0 : contextLevel()) != null ? _a : 0) + 1, 6), 1);
13
+ };
14
+ return _web.createComponent.call(void 0, _AUGTJ473cjs.HeadingContext.Provider, {
15
+ value: nextLevel,
16
+ get children() {
17
+ return props.children;
18
+ }
19
+ });
20
+ }
21
+
22
+
23
+ exports.HeadingLevel = HeadingLevel;
@@ -0,0 +1,27 @@
1
+ import { type JSX } from "solid-js";
2
+ import type { HeadingLevels } from "./utils.ts";
3
+ /**
4
+ * A component that sets the heading level for its children. It doesn't render
5
+ * any HTML element, just sets the
6
+ * [`level`](https://solid.ariakit.org/reference/heading-level#level) prop on the
7
+ * context.
8
+ * @see https://solid.ariakit.org/components/heading
9
+ * @example
10
+ * ```jsx
11
+ * <HeadingLevel>
12
+ * <Heading>Heading 1</Heading>
13
+ * <HeadingLevel>
14
+ * <Heading>Heading 2</Heading>
15
+ * </HeadingLevel>
16
+ * </HeadingLevel>
17
+ * ```
18
+ */
19
+ export declare function HeadingLevel(props: HeadingLevelProps): JSX.Element;
20
+ export interface HeadingLevelProps {
21
+ /**
22
+ * The heading level. By default, it'll increase the level by 1 based on the
23
+ * context.
24
+ */
25
+ level?: HeadingLevels;
26
+ children?: JSX.Element;
27
+ }
@@ -0,0 +1,27 @@
1
+ import { type JSX } from "solid-js";
2
+ import type { HeadingLevels } from "./utils.ts";
3
+ /**
4
+ * A component that sets the heading level for its children. It doesn't render
5
+ * any HTML element, just sets the
6
+ * [`level`](https://solid.ariakit.org/reference/heading-level#level) prop on the
7
+ * context.
8
+ * @see https://solid.ariakit.org/components/heading
9
+ * @example
10
+ * ```jsx
11
+ * <HeadingLevel>
12
+ * <Heading>Heading 1</Heading>
13
+ * <HeadingLevel>
14
+ * <Heading>Heading 2</Heading>
15
+ * </HeadingLevel>
16
+ * </HeadingLevel>
17
+ * ```
18
+ */
19
+ export declare function HeadingLevel(props: HeadingLevelProps): JSX.Element;
20
+ export interface HeadingLevelProps {
21
+ /**
22
+ * The heading level. By default, it'll increase the level by 1 based on the
23
+ * context.
24
+ */
25
+ level?: HeadingLevels;
26
+ children?: JSX.Element;
27
+ }
@@ -0,0 +1,45 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+ var _AUGTJ473cjs = require('../__chunks/AUGTJ473.cjs');
4
+
5
+
6
+ var _GVOD7RTZcjs = require('../__chunks/GVOD7RTZ.cjs');
7
+
8
+
9
+
10
+ var _V3ZEI37Lcjs = require('../__chunks/V3ZEI37L.cjs');
11
+
12
+
13
+
14
+ var _RLO4RIGLcjs = require('../__chunks/RLO4RIGL.cjs');
15
+
16
+ // src/heading/heading.tsx
17
+ var _solidjs = require('solid-js');
18
+ var TagName = "h1";
19
+ var useHeading = _V3ZEI37Lcjs.createHook.call(void 0, function useHeading2(props) {
20
+ const ref = _RLO4RIGLcjs.createRef.call(void 0, );
21
+ const level = _solidjs.useContext.call(void 0, _AUGTJ473cjs.HeadingContext) || (() => 1);
22
+ const Element = () => `h${level()}`;
23
+ const tagName = _GVOD7RTZcjs.extractTagName.call(void 0, ref.get);
24
+ const isNativeHeading = _solidjs.createMemo.call(void 0, () => !!tagName() && /^h\d$/.test(tagName()));
25
+ props = _RLO4RIGLcjs.mergeProps.call(void 0, {
26
+ // TODO: replace with LazyDynamic
27
+ render: Element(),
28
+ get role() {
29
+ return !isNativeHeading() ? "heading" : void 0;
30
+ },
31
+ get "aria-level"() {
32
+ return !isNativeHeading() ? level() : void 0;
33
+ },
34
+ ref: ref.set
35
+ }, props);
36
+ return props;
37
+ });
38
+ var Heading = function Heading2(props) {
39
+ const htmlProps = useHeading(props);
40
+ return _V3ZEI37Lcjs.createInstance.call(void 0, TagName, htmlProps);
41
+ };
42
+
43
+
44
+
45
+ exports.Heading = Heading; exports.useHeading = useHeading;
@@ -0,0 +1,39 @@
1
+ import { type ValidComponent } from "solid-js";
2
+ import type { Options, Props } from "../utils/types.ts";
3
+ import type { HeadingLevels } from "./utils.ts";
4
+ type HeadingElements = `h${HeadingLevels}`;
5
+ declare const TagName = "h1";
6
+ type TagName = HeadingElements;
7
+ /**
8
+ * Returns props to create a `Heading` component. The element type (or the
9
+ * `aria-level` prop, if the element type is not a native heading) is determined
10
+ * by the context level provided by the parent `HeadingLevel` component.
11
+ * @see https://solid.ariakit.org/components/heading
12
+ * @example
13
+ * ```jsx
14
+ * const props = useHeading();
15
+ * <Role {...props}>Heading</Role>
16
+ * ```
17
+ */
18
+ export declare const useHeading: import("../utils/types.ts").Hook<"h1" | "h2" | "h3" | "h4" | "h5" | "h6", HeadingOptions<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">>;
19
+ /**
20
+ * Renders a heading element. The element type (or the `aria-level` attribute,
21
+ * if the element type is not a native heading) is determined by the context
22
+ * level provided by the closest
23
+ * [`HeadingLevel`](https://solid.ariakit.org/reference/heading-level) ancestor.
24
+ * @see https://solid.ariakit.org/components/heading
25
+ * @example
26
+ * ```jsx
27
+ * <HeadingLevel>
28
+ * <Heading>Heading 1</Heading>
29
+ * <HeadingLevel>
30
+ * <Heading>Heading 2</Heading>
31
+ * </HeadingLevel>
32
+ * </HeadingLevel>
33
+ * ```
34
+ */
35
+ export declare const Heading: (props: HeadingProps) => import("solid-js").JSX.Element;
36
+ export interface HeadingOptions<_T extends ValidComponent = TagName> extends Options {
37
+ }
38
+ export type HeadingProps<T extends ValidComponent = TagName> = Props<T, HeadingOptions<T>>;
39
+ export {};
@@ -0,0 +1,39 @@
1
+ import { type ValidComponent } from "solid-js";
2
+ import type { Options, Props } from "../utils/types.ts";
3
+ import type { HeadingLevels } from "./utils.ts";
4
+ type HeadingElements = `h${HeadingLevels}`;
5
+ declare const TagName = "h1";
6
+ type TagName = HeadingElements;
7
+ /**
8
+ * Returns props to create a `Heading` component. The element type (or the
9
+ * `aria-level` prop, if the element type is not a native heading) is determined
10
+ * by the context level provided by the parent `HeadingLevel` component.
11
+ * @see https://solid.ariakit.org/components/heading
12
+ * @example
13
+ * ```jsx
14
+ * const props = useHeading();
15
+ * <Role {...props}>Heading</Role>
16
+ * ```
17
+ */
18
+ export declare const useHeading: import("../utils/types.ts").Hook<"h1" | "h2" | "h3" | "h4" | "h5" | "h6", HeadingOptions<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">>;
19
+ /**
20
+ * Renders a heading element. The element type (or the `aria-level` attribute,
21
+ * if the element type is not a native heading) is determined by the context
22
+ * level provided by the closest
23
+ * [`HeadingLevel`](https://solid.ariakit.org/reference/heading-level) ancestor.
24
+ * @see https://solid.ariakit.org/components/heading
25
+ * @example
26
+ * ```jsx
27
+ * <HeadingLevel>
28
+ * <Heading>Heading 1</Heading>
29
+ * <HeadingLevel>
30
+ * <Heading>Heading 2</Heading>
31
+ * </HeadingLevel>
32
+ * </HeadingLevel>
33
+ * ```
34
+ */
35
+ export declare const Heading: (props: HeadingProps) => import("solid-js").JSX.Element;
36
+ export interface HeadingOptions<_T extends ValidComponent = TagName> extends Options {
37
+ }
38
+ export type HeadingProps<T extends ValidComponent = TagName> = Props<T, HeadingOptions<T>>;
39
+ export {};
@@ -0,0 +1 @@
1
+ "use strict";
@@ -0,0 +1 @@
1
+ export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
@@ -0,0 +1 @@
1
+ export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
@@ -0,0 +1,26 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+
4
+ var _V3ZEI37Lcjs = require('../__chunks/V3ZEI37L.cjs');
5
+ require('../__chunks/RLO4RIGL.cjs');
6
+
7
+ // src/role/role.tsx
8
+ var TagName = "div";
9
+ var elements = ["a", "button", "details", "dialog", "div", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "img", "input", "label", "li", "nav", "ol", "p", "section", "select", "span", "summary", "textarea", "ul", "svg"];
10
+ var useRole = _V3ZEI37Lcjs.createHook.call(void 0, function useRole2(props) {
11
+ return props;
12
+ });
13
+ var Role = function Role2(props) {
14
+ return _V3ZEI37Lcjs.createInstance.call(void 0, TagName, props);
15
+ };
16
+ Object.assign(Role, elements.reduce((acc, element) => {
17
+ acc[element] = function Role3(props) {
18
+ return _V3ZEI37Lcjs.createInstance.call(void 0, element, props);
19
+ };
20
+ return acc;
21
+ }, {}));
22
+
23
+
24
+
25
+
26
+ exports.Role = Role; exports.elements = elements; exports.useRole = useRole;
@@ -0,0 +1,33 @@
1
+ import type { Component, ValidComponent } from "solid-js";
2
+ import type { Options, Props } from "../utils/types.ts";
3
+ declare const TagName = "div";
4
+ type TagName = typeof TagName;
5
+ export declare const elements: readonly ["a", "button", "details", "dialog", "div", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "img", "input", "label", "li", "nav", "ol", "p", "section", "select", "span", "summary", "textarea", "ul", "svg"];
6
+ type RoleElements = {
7
+ [K in (typeof elements)[number]]: Component<RoleProps<K>>;
8
+ };
9
+ /**
10
+ * Returns props to create a `Role` component.
11
+ * @see https://solid.ariakit.org/components/role
12
+ * @example
13
+ * ```jsx
14
+ * const props = useRole();
15
+ * <Role {...props} />
16
+ * ```
17
+ */
18
+ export declare const useRole: import("../utils/types.ts").Hook<"div", RoleOptions<"div">>;
19
+ /**
20
+ * Renders an abstract element that supports the `render` prop and a
21
+ * `wrapInstance` prop that can be used to wrap the underlying component
22
+ * instance with Solid Portal, Context or other component types.
23
+ * @see https://solid.ariakit.org/components/role
24
+ * @example
25
+ * ```jsx
26
+ * <Role render={<As.div />} />
27
+ * ```
28
+ */
29
+ export declare const Role: Component<RoleProps> & RoleElements;
30
+ export interface RoleOptions<_T extends ValidComponent = TagName> extends Options {
31
+ }
32
+ export type RoleProps<T extends ValidComponent = TagName> = Props<T, RoleOptions>;
33
+ export {};
@@ -0,0 +1,33 @@
1
+ import type { Component, ValidComponent } from "solid-js";
2
+ import type { Options, Props } from "../utils/types.ts";
3
+ declare const TagName = "div";
4
+ type TagName = typeof TagName;
5
+ export declare const elements: readonly ["a", "button", "details", "dialog", "div", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "img", "input", "label", "li", "nav", "ol", "p", "section", "select", "span", "summary", "textarea", "ul", "svg"];
6
+ type RoleElements = {
7
+ [K in (typeof elements)[number]]: Component<RoleProps<K>>;
8
+ };
9
+ /**
10
+ * Returns props to create a `Role` component.
11
+ * @see https://solid.ariakit.org/components/role
12
+ * @example
13
+ * ```jsx
14
+ * const props = useRole();
15
+ * <Role {...props} />
16
+ * ```
17
+ */
18
+ export declare const useRole: import("../utils/types.ts").Hook<"div", RoleOptions<"div">>;
19
+ /**
20
+ * Renders an abstract element that supports the `render` prop and a
21
+ * `wrapInstance` prop that can be used to wrap the underlying component
22
+ * instance with Solid Portal, Context or other component types.
23
+ * @see https://solid.ariakit.org/components/role
24
+ * @example
25
+ * ```jsx
26
+ * <Role render={<As.div />} />
27
+ * ```
28
+ */
29
+ export declare const Role: Component<RoleProps> & RoleElements;
30
+ export interface RoleOptions<_T extends ValidComponent = TagName> extends Options {
31
+ }
32
+ export type RoleProps<T extends ValidComponent = TagName> = Props<T, RoleOptions>;
33
+ export {};
@@ -0,0 +1,30 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+
4
+
5
+ var _V3ZEI37Lcjs = require('../__chunks/V3ZEI37L.cjs');
6
+
7
+
8
+ var _RLO4RIGLcjs = require('../__chunks/RLO4RIGL.cjs');
9
+
10
+ // src/separator/separator.tsx
11
+ var TagName = "hr";
12
+ var useSeparator = _V3ZEI37Lcjs.createHook.call(void 0, _V3ZEI37Lcjs.withOptions.call(void 0, {
13
+ orientation: "horizontal"
14
+ }, function useSeparator2(props, options) {
15
+ props = _RLO4RIGLcjs.mergeProps.call(void 0, {
16
+ role: "separator",
17
+ get "aria-orientation"() {
18
+ return options.orientation;
19
+ }
20
+ }, props);
21
+ return props;
22
+ }));
23
+ var Separator = function Separator2(props) {
24
+ const htmlProps = useSeparator(props);
25
+ return _V3ZEI37Lcjs.createInstance.call(void 0, TagName, htmlProps);
26
+ };
27
+
28
+
29
+
30
+ exports.Separator = Separator; exports.useSeparator = useSeparator;
@@ -0,0 +1,32 @@
1
+ import type { ValidComponent } from "solid-js";
2
+ import type { Options, Props } from "../utils/types.ts";
3
+ declare const TagName = "hr";
4
+ type TagName = typeof TagName;
5
+ /**
6
+ * Returns props to create a `Separator` component.
7
+ * @see https://solid.ariakit.org/components/separator
8
+ * @example
9
+ * ```jsx
10
+ * const props = useSeparator({ orientation: "horizontal" });
11
+ * <Role {...props} />
12
+ * ```
13
+ */
14
+ export declare const useSeparator: import("../utils/types.ts").Hook<"hr", SeparatorOptions<"hr">>;
15
+ /**
16
+ * Renders a separator element.
17
+ * @see https://solid.ariakit.org/components/separator
18
+ * @example
19
+ * ```jsx
20
+ * <Separator orientation="horizontal" />
21
+ * ```
22
+ */
23
+ export declare const Separator: (props: SeparatorProps) => import("solid-js").JSX.Element;
24
+ export interface SeparatorOptions<_T extends ValidComponent = TagName> extends Options {
25
+ /**
26
+ * The orientation of the separator.
27
+ * @default "horizontal"
28
+ */
29
+ orientation?: "horizontal" | "vertical";
30
+ }
31
+ export type SeparatorProps<T extends ValidComponent = TagName> = Props<T, SeparatorOptions<T>>;
32
+ export {};
@@ -0,0 +1,32 @@
1
+ import type { ValidComponent } from "solid-js";
2
+ import type { Options, Props } from "../utils/types.ts";
3
+ declare const TagName = "hr";
4
+ type TagName = typeof TagName;
5
+ /**
6
+ * Returns props to create a `Separator` component.
7
+ * @see https://solid.ariakit.org/components/separator
8
+ * @example
9
+ * ```jsx
10
+ * const props = useSeparator({ orientation: "horizontal" });
11
+ * <Role {...props} />
12
+ * ```
13
+ */
14
+ export declare const useSeparator: import("../utils/types.ts").Hook<"hr", SeparatorOptions<"hr">>;
15
+ /**
16
+ * Renders a separator element.
17
+ * @see https://solid.ariakit.org/components/separator
18
+ * @example
19
+ * ```jsx
20
+ * <Separator orientation="horizontal" />
21
+ * ```
22
+ */
23
+ export declare const Separator: (props: SeparatorProps) => import("solid-js").JSX.Element;
24
+ export interface SeparatorOptions<_T extends ValidComponent = TagName> extends Options {
25
+ /**
26
+ * The orientation of the separator.
27
+ * @default "horizontal"
28
+ */
29
+ orientation?: "horizontal" | "vertical";
30
+ }
31
+ export type SeparatorProps<T extends ValidComponent = TagName> = Props<T, SeparatorOptions<T>>;
32
+ export {};
@@ -0,0 +1,8 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+
4
+ var _GVOD7RTZcjs = require('../__chunks/GVOD7RTZ.cjs');
5
+
6
+
7
+
8
+ exports.createId = _GVOD7RTZcjs.createId; exports.extractTagName = _GVOD7RTZcjs.extractTagName;
@@ -0,0 +1,16 @@
1
+ import { type MaybeAccessor } from "@solid-primitives/utils";
2
+ import { type Accessor, type ValidComponent } from "solid-js";
3
+ /**
4
+ * Generates a unique ID.
5
+ */
6
+ export declare function createId(defaultId?: MaybeAccessor<string | undefined>): Accessor<string>;
7
+ /**
8
+ * Returns the tag name by parsing an element.
9
+ * @example
10
+ * function Component(props) {
11
+ * const [ref, setRef] = createSignal();
12
+ * const tagName = extractTagName(ref, "button"); // () => "div"
13
+ * return <div ref={setRef} {...props} />;
14
+ * }
15
+ */
16
+ export declare function extractTagName(element?: MaybeAccessor<HTMLElement | undefined>, fallback?: ValidComponent): () => string | undefined;
@@ -0,0 +1,16 @@
1
+ import { type MaybeAccessor } from "@solid-primitives/utils";
2
+ import { type Accessor, type ValidComponent } from "solid-js";
3
+ /**
4
+ * Generates a unique ID.
5
+ */
6
+ export declare function createId(defaultId?: MaybeAccessor<string | undefined>): Accessor<string>;
7
+ /**
8
+ * Returns the tag name by parsing an element.
9
+ * @example
10
+ * function Component(props) {
11
+ * const [ref, setRef] = createSignal();
12
+ * const tagName = extractTagName(ref, "button"); // () => "div"
13
+ * return <div ref={setRef} {...props} />;
14
+ * }
15
+ */
16
+ export declare function extractTagName(element?: MaybeAccessor<HTMLElement | undefined>, fallback?: ValidComponent): () => string | undefined;
@@ -0,0 +1,12 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
+
3
+
4
+
5
+
6
+ var _RLO4RIGLcjs = require('../__chunks/RLO4RIGL.cjs');
7
+
8
+
9
+
10
+
11
+
12
+ exports.createRef = _RLO4RIGLcjs.createRef; exports.extractPropsWithDefaults = _RLO4RIGLcjs.extractPropsWithDefaults; exports.mergeProps = _RLO4RIGLcjs.mergeProps; exports.stableAccessor = _RLO4RIGLcjs.stableAccessor;