@ariakit/solid-core 0.0.1 → 0.1.1
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.
- package/CHANGELOG.md +9 -0
- package/as/as/package.json +8 -0
- package/cjs/__chunks/53WPOLZU.cjs +7 -0
- package/cjs/__chunks/AUGTJ473.cjs +7 -0
- package/cjs/__chunks/GVOD7RTZ.cjs +21 -0
- package/cjs/__chunks/JFCGWMZC.cjs +35 -0
- package/cjs/__chunks/RLO4RIGL.cjs +42 -0
- package/cjs/__chunks/T5IUBZJK.cjs +39 -0
- package/cjs/__chunks/V3ZEI37L.cjs +61 -0
- package/cjs/__chunks/V5YR7HBG.cjs +37 -0
- package/cjs/as/as.cjs +7 -0
- package/cjs/as/as.d.cts +30 -0
- package/cjs/as/as.d.ts +30 -0
- package/cjs/focus-trap/focus-trap-region.cjs +68 -0
- package/cjs/focus-trap/focus-trap-region.d.cts +38 -0
- package/cjs/focus-trap/focus-trap-region.d.ts +38 -0
- package/cjs/focus-trap/focus-trap.cjs +11 -0
- package/cjs/focus-trap/focus-trap.d.cts +27 -0
- package/cjs/focus-trap/focus-trap.d.ts +27 -0
- package/cjs/group/group-label-context.cjs +6 -0
- package/cjs/group/group-label-context.d.cts +2 -0
- package/cjs/group/group-label-context.d.ts +2 -0
- package/cjs/group/group-label.cjs +41 -0
- package/cjs/group/group-label.d.cts +34 -0
- package/cjs/group/group-label.d.ts +34 -0
- package/cjs/group/group.cjs +43 -0
- package/cjs/group/group.d.cts +28 -0
- package/cjs/group/group.d.ts +28 -0
- package/cjs/heading/heading-context.cjs +6 -0
- package/cjs/heading/heading-context.d.cts +3 -0
- package/cjs/heading/heading-context.d.ts +3 -0
- package/cjs/heading/heading-level.cjs +23 -0
- package/cjs/heading/heading-level.d.cts +27 -0
- package/cjs/heading/heading-level.d.ts +27 -0
- package/cjs/heading/heading.cjs +45 -0
- package/cjs/heading/heading.d.cts +39 -0
- package/cjs/heading/heading.d.ts +39 -0
- package/cjs/heading/utils.cjs +1 -0
- package/cjs/heading/utils.d.cts +1 -0
- package/cjs/heading/utils.d.ts +1 -0
- package/cjs/role/role.cjs +26 -0
- package/cjs/role/role.d.cts +33 -0
- package/cjs/role/role.d.ts +33 -0
- package/cjs/separator/separator.cjs +30 -0
- package/cjs/separator/separator.d.cts +32 -0
- package/cjs/separator/separator.d.ts +32 -0
- package/cjs/utils/misc.cjs +8 -0
- package/cjs/utils/misc.d.cts +16 -0
- package/cjs/utils/misc.d.ts +16 -0
- package/cjs/utils/reactivity.cjs +12 -0
- package/cjs/utils/reactivity.d.cts +109 -0
- package/cjs/utils/reactivity.d.ts +109 -0
- package/cjs/utils/system.cjs +13 -0
- package/cjs/utils/system.d.cts +45 -0
- package/cjs/utils/system.d.ts +45 -0
- package/cjs/utils/types.cjs +1 -0
- package/cjs/utils/types.d.cts +56 -0
- package/cjs/utils/types.d.ts +56 -0
- package/cjs/visually-hidden/visually-hidden.cjs +10 -0
- package/cjs/visually-hidden/visually-hidden.d.cts +34 -0
- package/cjs/visually-hidden/visually-hidden.d.ts +34 -0
- package/esm/__chunks/I7JSIDPD.js +7 -0
- package/esm/__chunks/ILGMKAYU.js +37 -0
- package/esm/__chunks/NX66AMGW.js +39 -0
- package/esm/__chunks/OKOFCLOZ.js +61 -0
- package/esm/__chunks/QKOHDUFI.js +42 -0
- package/esm/__chunks/SFKMELHD.js +35 -0
- package/esm/__chunks/UKDBTPK5.js +21 -0
- package/esm/__chunks/VOWRNGOM.js +7 -0
- package/esm/as/as.d.ts +30 -0
- package/esm/as/as.js +7 -0
- package/esm/focus-trap/focus-trap-region.d.ts +38 -0
- package/esm/focus-trap/focus-trap-region.js +68 -0
- package/esm/focus-trap/focus-trap.d.ts +27 -0
- package/esm/focus-trap/focus-trap.js +11 -0
- package/esm/group/group-label-context.d.ts +2 -0
- package/esm/group/group-label-context.js +6 -0
- package/esm/group/group-label.d.ts +34 -0
- package/esm/group/group-label.js +41 -0
- package/esm/group/group.d.ts +28 -0
- package/esm/group/group.js +43 -0
- package/esm/heading/heading-context.d.ts +3 -0
- package/esm/heading/heading-context.js +6 -0
- package/esm/heading/heading-level.d.ts +27 -0
- package/esm/heading/heading-level.js +23 -0
- package/esm/heading/heading.d.ts +39 -0
- package/esm/heading/heading.js +45 -0
- package/esm/heading/utils.d.ts +1 -0
- package/esm/heading/utils.js +0 -0
- package/esm/role/role.d.ts +33 -0
- package/esm/role/role.js +26 -0
- package/esm/separator/separator.d.ts +32 -0
- package/esm/separator/separator.js +30 -0
- package/esm/utils/misc.d.ts +16 -0
- package/esm/utils/misc.js +8 -0
- package/esm/utils/reactivity.d.ts +109 -0
- package/esm/utils/reactivity.js +12 -0
- package/esm/utils/system.d.ts +45 -0
- package/esm/utils/system.js +13 -0
- package/esm/utils/types.d.ts +56 -0
- package/esm/utils/types.js +0 -0
- package/esm/visually-hidden/visually-hidden.d.ts +34 -0
- package/esm/visually-hidden/visually-hidden.js +10 -0
- package/focus-trap/focus-trap/package.json +8 -0
- package/focus-trap/focus-trap-region/package.json +8 -0
- package/group/group/package.json +8 -0
- package/group/group-label/package.json +8 -0
- package/group/group-label-context/package.json +8 -0
- package/heading/heading/package.json +8 -0
- package/heading/heading-context/package.json +8 -0
- package/heading/heading-level/package.json +8 -0
- package/heading/utils/package.json +8 -0
- package/index.ts +1 -0
- package/license +21 -0
- package/package.json +181 -6
- package/readme.md +19 -0
- package/role/role/package.json +8 -0
- package/separator/separator/package.json +8 -0
- package/solid/__chunks/ALJQAVR2.jsx +42 -0
- package/solid/__chunks/HBI7B4XO.jsx +52 -0
- package/solid/__chunks/HUX7TBVM.jsx +37 -0
- package/solid/__chunks/KXVBEYOF.jsx +21 -0
- package/solid/__chunks/O5QTZ2VS.jsx +42 -0
- package/solid/__chunks/PIGECGWJ.jsx +40 -0
- package/solid/__chunks/TCHPU5P4.jsx +7 -0
- package/solid/__chunks/VAA446IN.jsx +7 -0
- package/solid/as/as.jsx +7 -0
- package/solid/focus-trap/focus-trap-region.jsx +63 -0
- package/solid/focus-trap/focus-trap.jsx +11 -0
- package/solid/group/group-label-context.jsx +6 -0
- package/solid/group/group-label.jsx +50 -0
- package/solid/group/group.jsx +45 -0
- package/solid/heading/heading-context.jsx +6 -0
- package/solid/heading/heading-level.jsx +22 -0
- package/solid/heading/heading.jsx +52 -0
- package/solid/heading/utils.jsx +0 -0
- package/solid/role/role.jsx +59 -0
- package/solid/separator/separator.jsx +36 -0
- package/solid/utils/misc.jsx +8 -0
- package/solid/utils/reactivity.jsx +12 -0
- package/solid/utils/system.jsx +13 -0
- package/solid/utils/types.jsx +0 -0
- package/solid/visually-hidden/visually-hidden.jsx +10 -0
- package/tsconfig.build.json +4 -0
- package/utils/misc/package.json +8 -0
- package/utils/reactivity/package.json +8 -0
- package/utils/system/package.json +8 -0
- package/utils/types/package.json +8 -0
- 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
|
+
|
|
7
|
+
|
|
8
|
+
var _V3ZEI37Lcjs = require('../__chunks/V3ZEI37L.cjs');
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
var _RLO4RIGLcjs = require('../__chunks/RLO4RIGL.cjs');
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
var _53WPOLZUcjs = require('../__chunks/53WPOLZU.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,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 _GVOD7RTZcjs = require('../__chunks/GVOD7RTZ.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
var _V3ZEI37Lcjs = require('../__chunks/V3ZEI37L.cjs');
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
var _RLO4RIGLcjs = require('../__chunks/RLO4RIGL.cjs');
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
var _AUGTJ473cjs = require('../__chunks/AUGTJ473.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,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;
|