@bento/radio 0.2.2 → 0.2.3
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/dist/index.cjs +142 -84
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +43 -40
- package/dist/index.d.cts.map +1 -0
- package/dist/index.d.mts +56 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +122 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +18 -17
- package/dist/index.d.ts +0 -53
- package/dist/index.js +0 -82
- package/dist/index.js.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -1,89 +1,147 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
//#region \0rolldown/runtime.js
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
11
|
+
key = keys[i];
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
13
|
+
get: ((k) => from[k]).bind(null, key),
|
|
14
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
20
|
+
value: mod,
|
|
21
|
+
enumerable: true
|
|
22
|
+
}) : target, mod));
|
|
23
|
+
//#endregion
|
|
24
|
+
let react = require("react");
|
|
25
|
+
react = __toESM(react);
|
|
26
|
+
let _bento_container = require("@bento/container");
|
|
27
|
+
let _bento_use_data_attributes = require("@bento/use-data-attributes");
|
|
28
|
+
let _bento_icon = require("@bento/icon");
|
|
29
|
+
let _bento_input = require("@bento/input");
|
|
30
|
+
let _bento_slots = require("@bento/slots");
|
|
31
|
+
let _bento_use_props = require("@bento/use-props");
|
|
32
|
+
let _bento_visually_hidden = require("@bento/visually-hidden");
|
|
33
|
+
let _react_aria_utils = require("@react-aria/utils");
|
|
34
|
+
let react_aria = require("react-aria");
|
|
35
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
let react_stately = require("react-stately");
|
|
37
|
+
//#region src/radio-group-state.tsx
|
|
38
|
+
const RadioGroupStateContext = react.default.createContext(null);
|
|
39
|
+
//#endregion
|
|
40
|
+
//#region src/radio.tsx
|
|
41
|
+
/**
|
|
42
|
+
* The `Radio` is a single radio option that can be selected by the user.
|
|
43
|
+
*/
|
|
44
|
+
const Radio = (0, _bento_slots.withSlots)("BentoRadio", function Radio(args) {
|
|
45
|
+
const { props, apply } = (0, _bento_use_props.useProps)(args);
|
|
46
|
+
const state = react.default.useContext(RadioGroupStateContext);
|
|
47
|
+
const ref = react.default.useRef(null);
|
|
48
|
+
const inputRef = (0, _react_aria_utils.useObjectRef)((0, react.useMemo)(() => (0, _react_aria_utils.mergeRefs)(ref, props.inputRef), [ref, props.inputRef]));
|
|
49
|
+
const { isFocused, isFocusVisible, focusProps } = (0, react_aria.useFocusRing)();
|
|
50
|
+
const { inputProps, labelProps, isSelected, isPressed } = (0, react_aria.useRadio)(props, state, inputRef);
|
|
51
|
+
const interactionDisabled = props.isDisabled || state.isReadOnly;
|
|
52
|
+
const { hoverProps, isHovered } = (0, react_aria.useHover)({
|
|
53
|
+
...props,
|
|
54
|
+
isDisabled: interactionDisabled
|
|
55
|
+
});
|
|
56
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_bento_container.Container, {
|
|
57
|
+
as: "label",
|
|
58
|
+
...apply((0, _react_aria_utils.mergeProps)(labelProps, hoverProps)),
|
|
59
|
+
...(0, _bento_use_data_attributes.useDataAttributes)({
|
|
60
|
+
selected: isSelected,
|
|
61
|
+
pressed: isPressed,
|
|
62
|
+
hovered: isHovered,
|
|
63
|
+
focused: isFocused,
|
|
64
|
+
focusVisible: isFocusVisible,
|
|
65
|
+
disabled: props.isDisabled,
|
|
66
|
+
readonly: state.isReadOnly,
|
|
67
|
+
invalid: state.isInvalid,
|
|
68
|
+
required: state.isRequired
|
|
69
|
+
}),
|
|
70
|
+
children: [
|
|
71
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_input.Input, {
|
|
72
|
+
...(0, _react_aria_utils.mergeProps)(inputProps, focusProps),
|
|
73
|
+
ref: inputRef
|
|
74
|
+
}) }),
|
|
75
|
+
isSelected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_icon.Icon, {
|
|
76
|
+
slot: "icon-checked",
|
|
77
|
+
icon: "radioChecked",
|
|
78
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
79
|
+
viewBox: "0 0 24 24",
|
|
80
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
81
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
|
|
82
|
+
cx: 12,
|
|
83
|
+
cy: 12,
|
|
84
|
+
r: 8 - 6 / 2,
|
|
85
|
+
fill: "none",
|
|
86
|
+
stroke: "orange",
|
|
87
|
+
strokeWidth: 6
|
|
88
|
+
})
|
|
89
|
+
})
|
|
90
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_icon.Icon, {
|
|
91
|
+
slot: "icon-unchecked",
|
|
92
|
+
icon: "radioUnchecked",
|
|
93
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
94
|
+
viewBox: "0 0 24 24",
|
|
95
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
96
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
|
|
97
|
+
cx: 12,
|
|
98
|
+
cy: 12,
|
|
99
|
+
r: 8,
|
|
100
|
+
fill: "none",
|
|
101
|
+
stroke: "gray",
|
|
102
|
+
strokeWidth: 2
|
|
103
|
+
})
|
|
104
|
+
})
|
|
105
|
+
}),
|
|
106
|
+
props.children
|
|
107
|
+
]
|
|
108
|
+
});
|
|
57
109
|
});
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
110
|
+
//#endregion
|
|
111
|
+
//#region src/radio-group.tsx
|
|
112
|
+
/**
|
|
113
|
+
* The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
|
|
114
|
+
*/
|
|
115
|
+
const RadioGroup = (0, _bento_slots.withSlots)("BentoRadioGroup", function RadioGroup(args) {
|
|
116
|
+
const { props, apply } = (0, _bento_use_props.useProps)(args);
|
|
117
|
+
const state = (0, react_stately.useRadioGroupState)(props);
|
|
118
|
+
const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = (0, react_aria.useRadioGroup)({
|
|
119
|
+
...props,
|
|
120
|
+
label: props.label ?? "Radio Group",
|
|
121
|
+
description: props.description ?? "Description"
|
|
122
|
+
}, state);
|
|
123
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupStateContext.Provider, {
|
|
124
|
+
value: state,
|
|
125
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_bento_container.Container, {
|
|
126
|
+
...apply(radioGroupProps),
|
|
127
|
+
...(0, _bento_use_data_attributes.useDataAttributes)({
|
|
128
|
+
orientation: props.orientation || "vertical",
|
|
129
|
+
invalid: state.isInvalid,
|
|
130
|
+
disabled: state.isDisabled,
|
|
131
|
+
readonly: state.isReadOnly,
|
|
132
|
+
required: state.isRequired
|
|
133
|
+
}),
|
|
134
|
+
slots: {
|
|
135
|
+
label: labelProps,
|
|
136
|
+
description: descriptionProps,
|
|
137
|
+
error: (0, react_aria.mergeProps)(errorMessageProps, validationResult)
|
|
138
|
+
},
|
|
139
|
+
children: props.children
|
|
140
|
+
})
|
|
141
|
+
});
|
|
84
142
|
});
|
|
85
|
-
|
|
143
|
+
//#endregion
|
|
86
144
|
exports.Radio = Radio;
|
|
87
145
|
exports.RadioGroup = RadioGroup;
|
|
88
|
-
|
|
146
|
+
|
|
89
147
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["React","React","Container","VisuallyHidden","Input","Icon","Container"],"sources":["../src/radio-group-state.tsx","../src/radio.tsx","../src/radio-group.tsx"],"sourcesContent":["import React from 'react';\nimport { RadioGroupState } from 'react-stately';\n\nexport const RadioGroupStateContext = React.createContext<RadioGroupState | null>(null);\n","import React, { useMemo } from 'react';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { Icon } from '@bento/icon';\nimport { Input } from '@bento/input';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { VisuallyHidden } from '@bento/visually-hidden';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, useRadio, type AriaRadioProps } from 'react-aria';\nimport { RadioGroupStateContext } from './radio-group-state';\n\nexport interface RadioProps extends AriaRadioProps, Omit<ContainerProps, keyof AriaRadioProps> {\n /** The value of the radio button, used when submitting an HTML form. */\n value: string;\n\n /** A ref for the HTML input element. */\n inputRef?: React.Ref<HTMLInputElement>;\n\n /** The label for the Radio. Accepts any renderable node. */\n children?: React.ReactNode;\n\n /**\n * Whether the radio button is disabled or not. Shows that a selection exists,\n * but is not available in that circumstance.\n */\n isDisabled?: boolean;\n\n /** Whether the element should receive focus on render. */\n autoFocus?: boolean;\n}\n\n/**\n * The `Radio` is a single radio option that can be selected by the user.\n */\nexport const Radio = withSlots('BentoRadio', function Radio(args: RadioProps) {\n const { props, apply } = useProps(args);\n const state = React.useContext(RadioGroupStateContext)!;\n const ref = React.useRef<HTMLInputElement>(null);\n const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n const { inputProps, labelProps, isSelected, isPressed } = useRadio(props as RadioProps, state, inputRef);\n const interactionDisabled = props.isDisabled || state.isReadOnly;\n const { hoverProps, isHovered } = useHover({\n ...props,\n isDisabled: interactionDisabled\n });\n\n return (\n <Container\n as=\"label\"\n {...apply(mergeProps(labelProps, hoverProps))}\n {...useDataAttributes({\n selected: isSelected,\n pressed: isPressed,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: props.isDisabled,\n readonly: state.isReadOnly,\n invalid: state.isInvalid,\n required: state.isRequired\n })}\n >\n <VisuallyHidden>\n <Input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n </VisuallyHidden>\n\n {isSelected ? (\n <Icon slot=\"icon-checked\" icon=\"radioChecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx={12} cy={12} r={8 - 6 / 2} fill=\"none\" stroke=\"orange\" strokeWidth={6} />\n </svg>\n </Icon>\n ) : (\n <Icon slot=\"icon-unchecked\" icon=\"radioUnchecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx={12} cy={12} r={8} fill=\"none\" stroke=\"gray\" strokeWidth={2} />\n </svg>\n </Icon>\n )}\n {props.children}\n </Container>\n );\n});\n","import React from 'react';\nimport { withSlots } from '@bento/slots';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useProps } from '@bento/use-props';\nimport { useRadioGroup, mergeProps, type AriaRadioGroupProps } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\nimport { RadioGroupStateContext } from './radio-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, keyof AriaRadioGroupProps> {\n /** The current value (controlled). */\n value?: string;\n\n /** The default value (uncontrolled). */\n defaultValue?: string;\n\n /** Whether the input is disabled. */\n isDisabled?: boolean;\n\n /** Whether the input can be selected but not changed by the user. */\n isReadOnly?: boolean;\n\n /** Whether user input is required on the input before form submission. */\n isRequired?: boolean;\n\n /** Whether the input value is invalid. */\n isInvalid?: boolean;\n\n /** The name of the input element, used when submitting an HTML form. */\n name?: string;\n\n /**\n * The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n */\n form?: string;\n\n /** Radio children. */\n children: React.ReactNode;\n}\n\n/**\n * The `RadioGroup` allows a user to select a single item from a list of `Radio` components.\n */\nexport const RadioGroup = withSlots('BentoRadioGroup', function RadioGroup(args: RadioGroupProps) {\n const { props, apply } = useProps(args);\n const state = useRadioGroupState(props);\n const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(\n { ...props, label: props.label ?? 'Radio Group', description: props.description ?? 'Description' },\n state\n );\n\n return (\n <RadioGroupStateContext.Provider value={state}>\n <Container\n {...apply(radioGroupProps)}\n {...useDataAttributes({\n orientation: props.orientation || 'vertical',\n invalid: state.isInvalid,\n disabled: state.isDisabled,\n readonly: state.isReadOnly,\n required: state.isRequired\n })}\n slots={{\n label: labelProps,\n description: descriptionProps,\n error: mergeProps(errorMessageProps, validationResult)\n }}\n >\n {props.children}\n </Container>\n </RadioGroupStateContext.Provider>\n );\n});\n"],"mappings":"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"}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,53 +1,56 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { ContainerProps } from
|
|
3
|
-
import {
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ContainerProps } from "@bento/container";
|
|
3
|
+
import { AriaRadioGroupProps, AriaRadioProps } from "react-aria";
|
|
4
4
|
|
|
5
|
+
//#region src/radio.d.ts
|
|
5
6
|
interface RadioProps extends AriaRadioProps, Omit<ContainerProps, keyof AriaRadioProps> {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
7
|
+
/** The value of the radio button, used when submitting an HTML form. */
|
|
8
|
+
value: string;
|
|
9
|
+
/** A ref for the HTML input element. */
|
|
10
|
+
inputRef?: React.Ref<HTMLInputElement>;
|
|
11
|
+
/** The label for the Radio. Accepts any renderable node. */
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Whether the radio button is disabled or not. Shows that a selection exists,
|
|
15
|
+
* but is not available in that circumstance.
|
|
16
|
+
*/
|
|
17
|
+
isDisabled?: boolean;
|
|
18
|
+
/** Whether the element should receive focus on render. */
|
|
19
|
+
autoFocus?: boolean;
|
|
19
20
|
}
|
|
20
21
|
/**
|
|
21
22
|
* The `Radio` is a single radio option that can be selected by the user.
|
|
22
23
|
*/
|
|
23
24
|
declare const Radio: React.MemoExoticComponent<React.ComponentType<any>>;
|
|
24
|
-
|
|
25
|
+
//#endregion
|
|
26
|
+
//#region src/radio-group.d.ts
|
|
25
27
|
interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, keyof AriaRadioGroupProps> {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
28
|
+
/** The current value (controlled). */
|
|
29
|
+
value?: string;
|
|
30
|
+
/** The default value (uncontrolled). */
|
|
31
|
+
defaultValue?: string;
|
|
32
|
+
/** Whether the input is disabled. */
|
|
33
|
+
isDisabled?: boolean;
|
|
34
|
+
/** Whether the input can be selected but not changed by the user. */
|
|
35
|
+
isReadOnly?: boolean;
|
|
36
|
+
/** Whether user input is required on the input before form submission. */
|
|
37
|
+
isRequired?: boolean;
|
|
38
|
+
/** Whether the input value is invalid. */
|
|
39
|
+
isInvalid?: boolean;
|
|
40
|
+
/** The name of the input element, used when submitting an HTML form. */
|
|
41
|
+
name?: string;
|
|
42
|
+
/**
|
|
43
|
+
* The `<form>` element to associate the input with.
|
|
44
|
+
* The value of this attribute must be the id of a `<form>` in the same document.
|
|
45
|
+
*/
|
|
46
|
+
form?: string;
|
|
47
|
+
/** Radio children. */
|
|
48
|
+
children: React.ReactNode;
|
|
47
49
|
}
|
|
48
50
|
/**
|
|
49
51
|
* The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
|
|
50
52
|
*/
|
|
51
53
|
declare const RadioGroup: React.MemoExoticComponent<React.ComponentType<any>>;
|
|
52
|
-
|
|
53
|
-
export { Radio, RadioGroup,
|
|
54
|
+
//#endregion
|
|
55
|
+
export { Radio, RadioGroup, RadioGroupProps, RadioProps };
|
|
56
|
+
//# sourceMappingURL=index.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.cts","names":[],"sources":["../src/radio.tsx","../src/radio-group.tsx"],"mappings":";;;;;UAYiB,UAAA,SAAmB,cAAA,EAAgB,IAAA,CAAK,cAAA,QAAsB,cAAA;;EAE7E,KAAA;EAF0B;EAK1B,QAAA,GAAW,KAAA,CAAM,GAAA,CAAI,gBAAA;EALkC;EAQvD,QAAA,GAAW,KAAA,CAAM,SAAA;EAHI;;;;EASrB,UAAA;EAdsD;EAiBtD,SAAA;AAAA;;;;cAMW,KAAA,EAAK,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA;;;UC1BD,eAAA,SAAwB,mBAAA,EAAqB,IAAA,CAAK,cAAA,QAAsB,mBAAA;;EAEvF,KAAA;EDC0B;ECE1B,YAAA;EDFuD;ECKvD,UAAA;EDAqB;ECGrB,UAAA;EDAW;ECGX,UAAA;EDXkD;ECclD,SAAA;EDdsD;ECiBtD,IAAA;EDjBkD;;;;ECuBlD,IAAA;EDlBW;ECqBX,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;;;;cAML,UAAA,EAAU,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA"}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ContainerProps } from "@bento/container";
|
|
3
|
+
import { AriaRadioGroupProps, AriaRadioProps } from "react-aria";
|
|
4
|
+
|
|
5
|
+
//#region src/radio.d.ts
|
|
6
|
+
interface RadioProps extends AriaRadioProps, Omit<ContainerProps, keyof AriaRadioProps> {
|
|
7
|
+
/** The value of the radio button, used when submitting an HTML form. */
|
|
8
|
+
value: string;
|
|
9
|
+
/** A ref for the HTML input element. */
|
|
10
|
+
inputRef?: React.Ref<HTMLInputElement>;
|
|
11
|
+
/** The label for the Radio. Accepts any renderable node. */
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Whether the radio button is disabled or not. Shows that a selection exists,
|
|
15
|
+
* but is not available in that circumstance.
|
|
16
|
+
*/
|
|
17
|
+
isDisabled?: boolean;
|
|
18
|
+
/** Whether the element should receive focus on render. */
|
|
19
|
+
autoFocus?: boolean;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* The `Radio` is a single radio option that can be selected by the user.
|
|
23
|
+
*/
|
|
24
|
+
declare const Radio: React.MemoExoticComponent<React.ComponentType<any>>;
|
|
25
|
+
//#endregion
|
|
26
|
+
//#region src/radio-group.d.ts
|
|
27
|
+
interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, keyof AriaRadioGroupProps> {
|
|
28
|
+
/** The current value (controlled). */
|
|
29
|
+
value?: string;
|
|
30
|
+
/** The default value (uncontrolled). */
|
|
31
|
+
defaultValue?: string;
|
|
32
|
+
/** Whether the input is disabled. */
|
|
33
|
+
isDisabled?: boolean;
|
|
34
|
+
/** Whether the input can be selected but not changed by the user. */
|
|
35
|
+
isReadOnly?: boolean;
|
|
36
|
+
/** Whether user input is required on the input before form submission. */
|
|
37
|
+
isRequired?: boolean;
|
|
38
|
+
/** Whether the input value is invalid. */
|
|
39
|
+
isInvalid?: boolean;
|
|
40
|
+
/** The name of the input element, used when submitting an HTML form. */
|
|
41
|
+
name?: string;
|
|
42
|
+
/**
|
|
43
|
+
* The `<form>` element to associate the input with.
|
|
44
|
+
* The value of this attribute must be the id of a `<form>` in the same document.
|
|
45
|
+
*/
|
|
46
|
+
form?: string;
|
|
47
|
+
/** Radio children. */
|
|
48
|
+
children: React.ReactNode;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
|
|
52
|
+
*/
|
|
53
|
+
declare const RadioGroup: React.MemoExoticComponent<React.ComponentType<any>>;
|
|
54
|
+
//#endregion
|
|
55
|
+
export { Radio, RadioGroup, RadioGroupProps, RadioProps };
|
|
56
|
+
//# sourceMappingURL=index.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/radio.tsx","../src/radio-group.tsx"],"mappings":";;;;;UAYiB,UAAA,SAAmB,cAAA,EAAgB,IAAA,CAAK,cAAA,QAAsB,cAAA;;EAE7E,KAAA;EAF0B;EAK1B,QAAA,GAAW,KAAA,CAAM,GAAA,CAAI,gBAAA;EALkC;EAQvD,QAAA,GAAW,KAAA,CAAM,SAAA;EAHI;;;;EASrB,UAAA;EAdsD;EAiBtD,SAAA;AAAA;;;;cAMW,KAAA,EAAK,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA;;;UC1BD,eAAA,SAAwB,mBAAA,EAAqB,IAAA,CAAK,cAAA,QAAsB,mBAAA;;EAEvF,KAAA;EDC0B;ECE1B,YAAA;EDFuD;ECKvD,UAAA;EDAqB;ECGrB,UAAA;EDAW;ECGX,UAAA;EDXkD;ECclD,SAAA;EDdsD;ECiBtD,IAAA;EDjBkD;;;;ECuBlD,IAAA;EDlBW;ECqBX,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;;;;cAML,UAAA,EAAU,KAAA,CAAA,mBAAA,CAAA,KAAA,CAAA,aAAA"}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import React, { useMemo } from "react";
|
|
2
|
+
import { Container } from "@bento/container";
|
|
3
|
+
import { useDataAttributes } from "@bento/use-data-attributes";
|
|
4
|
+
import { Icon } from "@bento/icon";
|
|
5
|
+
import { Input } from "@bento/input";
|
|
6
|
+
import { withSlots } from "@bento/slots";
|
|
7
|
+
import { useProps } from "@bento/use-props";
|
|
8
|
+
import { VisuallyHidden } from "@bento/visually-hidden";
|
|
9
|
+
import { mergeProps, mergeRefs, useObjectRef } from "@react-aria/utils";
|
|
10
|
+
import { mergeProps as mergeProps$1, useFocusRing, useHover, useRadio, useRadioGroup } from "react-aria";
|
|
11
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
|
+
import { useRadioGroupState } from "react-stately";
|
|
13
|
+
//#region src/radio-group-state.tsx
|
|
14
|
+
const RadioGroupStateContext = React.createContext(null);
|
|
15
|
+
//#endregion
|
|
16
|
+
//#region src/radio.tsx
|
|
17
|
+
/**
|
|
18
|
+
* The `Radio` is a single radio option that can be selected by the user.
|
|
19
|
+
*/
|
|
20
|
+
const Radio = withSlots("BentoRadio", function Radio(args) {
|
|
21
|
+
const { props, apply } = useProps(args);
|
|
22
|
+
const state = React.useContext(RadioGroupStateContext);
|
|
23
|
+
const ref = React.useRef(null);
|
|
24
|
+
const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
|
|
25
|
+
const { isFocused, isFocusVisible, focusProps } = useFocusRing();
|
|
26
|
+
const { inputProps, labelProps, isSelected, isPressed } = useRadio(props, state, inputRef);
|
|
27
|
+
const interactionDisabled = props.isDisabled || state.isReadOnly;
|
|
28
|
+
const { hoverProps, isHovered } = useHover({
|
|
29
|
+
...props,
|
|
30
|
+
isDisabled: interactionDisabled
|
|
31
|
+
});
|
|
32
|
+
return /* @__PURE__ */ jsxs(Container, {
|
|
33
|
+
as: "label",
|
|
34
|
+
...apply(mergeProps(labelProps, hoverProps)),
|
|
35
|
+
...useDataAttributes({
|
|
36
|
+
selected: isSelected,
|
|
37
|
+
pressed: isPressed,
|
|
38
|
+
hovered: isHovered,
|
|
39
|
+
focused: isFocused,
|
|
40
|
+
focusVisible: isFocusVisible,
|
|
41
|
+
disabled: props.isDisabled,
|
|
42
|
+
readonly: state.isReadOnly,
|
|
43
|
+
invalid: state.isInvalid,
|
|
44
|
+
required: state.isRequired
|
|
45
|
+
}),
|
|
46
|
+
children: [
|
|
47
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Input, {
|
|
48
|
+
...mergeProps(inputProps, focusProps),
|
|
49
|
+
ref: inputRef
|
|
50
|
+
}) }),
|
|
51
|
+
isSelected ? /* @__PURE__ */ jsx(Icon, {
|
|
52
|
+
slot: "icon-checked",
|
|
53
|
+
icon: "radioChecked",
|
|
54
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
55
|
+
viewBox: "0 0 24 24",
|
|
56
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
57
|
+
children: /* @__PURE__ */ jsx("circle", {
|
|
58
|
+
cx: 12,
|
|
59
|
+
cy: 12,
|
|
60
|
+
r: 8 - 6 / 2,
|
|
61
|
+
fill: "none",
|
|
62
|
+
stroke: "orange",
|
|
63
|
+
strokeWidth: 6
|
|
64
|
+
})
|
|
65
|
+
})
|
|
66
|
+
}) : /* @__PURE__ */ jsx(Icon, {
|
|
67
|
+
slot: "icon-unchecked",
|
|
68
|
+
icon: "radioUnchecked",
|
|
69
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
70
|
+
viewBox: "0 0 24 24",
|
|
71
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
72
|
+
children: /* @__PURE__ */ jsx("circle", {
|
|
73
|
+
cx: 12,
|
|
74
|
+
cy: 12,
|
|
75
|
+
r: 8,
|
|
76
|
+
fill: "none",
|
|
77
|
+
stroke: "gray",
|
|
78
|
+
strokeWidth: 2
|
|
79
|
+
})
|
|
80
|
+
})
|
|
81
|
+
}),
|
|
82
|
+
props.children
|
|
83
|
+
]
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
//#endregion
|
|
87
|
+
//#region src/radio-group.tsx
|
|
88
|
+
/**
|
|
89
|
+
* The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
|
|
90
|
+
*/
|
|
91
|
+
const RadioGroup = withSlots("BentoRadioGroup", function RadioGroup(args) {
|
|
92
|
+
const { props, apply } = useProps(args);
|
|
93
|
+
const state = useRadioGroupState(props);
|
|
94
|
+
const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup({
|
|
95
|
+
...props,
|
|
96
|
+
label: props.label ?? "Radio Group",
|
|
97
|
+
description: props.description ?? "Description"
|
|
98
|
+
}, state);
|
|
99
|
+
return /* @__PURE__ */ jsx(RadioGroupStateContext.Provider, {
|
|
100
|
+
value: state,
|
|
101
|
+
children: /* @__PURE__ */ jsx(Container, {
|
|
102
|
+
...apply(radioGroupProps),
|
|
103
|
+
...useDataAttributes({
|
|
104
|
+
orientation: props.orientation || "vertical",
|
|
105
|
+
invalid: state.isInvalid,
|
|
106
|
+
disabled: state.isDisabled,
|
|
107
|
+
readonly: state.isReadOnly,
|
|
108
|
+
required: state.isRequired
|
|
109
|
+
}),
|
|
110
|
+
slots: {
|
|
111
|
+
label: labelProps,
|
|
112
|
+
description: descriptionProps,
|
|
113
|
+
error: mergeProps$1(errorMessageProps, validationResult)
|
|
114
|
+
},
|
|
115
|
+
children: props.children
|
|
116
|
+
})
|
|
117
|
+
});
|
|
118
|
+
});
|
|
119
|
+
//#endregion
|
|
120
|
+
export { Radio, RadioGroup };
|
|
121
|
+
|
|
122
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["mergeProps"],"sources":["../src/radio-group-state.tsx","../src/radio.tsx","../src/radio-group.tsx"],"sourcesContent":["import React from 'react';\nimport { RadioGroupState } from 'react-stately';\n\nexport const RadioGroupStateContext = React.createContext<RadioGroupState | null>(null);\n","import React, { useMemo } from 'react';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { Icon } from '@bento/icon';\nimport { Input } from '@bento/input';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { VisuallyHidden } from '@bento/visually-hidden';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, useRadio, type AriaRadioProps } from 'react-aria';\nimport { RadioGroupStateContext } from './radio-group-state';\n\nexport interface RadioProps extends AriaRadioProps, Omit<ContainerProps, keyof AriaRadioProps> {\n /** The value of the radio button, used when submitting an HTML form. */\n value: string;\n\n /** A ref for the HTML input element. */\n inputRef?: React.Ref<HTMLInputElement>;\n\n /** The label for the Radio. Accepts any renderable node. */\n children?: React.ReactNode;\n\n /**\n * Whether the radio button is disabled or not. Shows that a selection exists,\n * but is not available in that circumstance.\n */\n isDisabled?: boolean;\n\n /** Whether the element should receive focus on render. */\n autoFocus?: boolean;\n}\n\n/**\n * The `Radio` is a single radio option that can be selected by the user.\n */\nexport const Radio = withSlots('BentoRadio', function Radio(args: RadioProps) {\n const { props, apply } = useProps(args);\n const state = React.useContext(RadioGroupStateContext)!;\n const ref = React.useRef<HTMLInputElement>(null);\n const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n const { inputProps, labelProps, isSelected, isPressed } = useRadio(props as RadioProps, state, inputRef);\n const interactionDisabled = props.isDisabled || state.isReadOnly;\n const { hoverProps, isHovered } = useHover({\n ...props,\n isDisabled: interactionDisabled\n });\n\n return (\n <Container\n as=\"label\"\n {...apply(mergeProps(labelProps, hoverProps))}\n {...useDataAttributes({\n selected: isSelected,\n pressed: isPressed,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: props.isDisabled,\n readonly: state.isReadOnly,\n invalid: state.isInvalid,\n required: state.isRequired\n })}\n >\n <VisuallyHidden>\n <Input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n </VisuallyHidden>\n\n {isSelected ? (\n <Icon slot=\"icon-checked\" icon=\"radioChecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx={12} cy={12} r={8 - 6 / 2} fill=\"none\" stroke=\"orange\" strokeWidth={6} />\n </svg>\n </Icon>\n ) : (\n <Icon slot=\"icon-unchecked\" icon=\"radioUnchecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx={12} cy={12} r={8} fill=\"none\" stroke=\"gray\" strokeWidth={2} />\n </svg>\n </Icon>\n )}\n {props.children}\n </Container>\n );\n});\n","import React from 'react';\nimport { withSlots } from '@bento/slots';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useProps } from '@bento/use-props';\nimport { useRadioGroup, mergeProps, type AriaRadioGroupProps } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\nimport { RadioGroupStateContext } from './radio-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, keyof AriaRadioGroupProps> {\n /** The current value (controlled). */\n value?: string;\n\n /** The default value (uncontrolled). */\n defaultValue?: string;\n\n /** Whether the input is disabled. */\n isDisabled?: boolean;\n\n /** Whether the input can be selected but not changed by the user. */\n isReadOnly?: boolean;\n\n /** Whether user input is required on the input before form submission. */\n isRequired?: boolean;\n\n /** Whether the input value is invalid. */\n isInvalid?: boolean;\n\n /** The name of the input element, used when submitting an HTML form. */\n name?: string;\n\n /**\n * The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n */\n form?: string;\n\n /** Radio children. */\n children: React.ReactNode;\n}\n\n/**\n * The `RadioGroup` allows a user to select a single item from a list of `Radio` components.\n */\nexport const RadioGroup = withSlots('BentoRadioGroup', function RadioGroup(args: RadioGroupProps) {\n const { props, apply } = useProps(args);\n const state = useRadioGroupState(props);\n const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(\n { ...props, label: props.label ?? 'Radio Group', description: props.description ?? 'Description' },\n state\n );\n\n return (\n <RadioGroupStateContext.Provider value={state}>\n <Container\n {...apply(radioGroupProps)}\n {...useDataAttributes({\n orientation: props.orientation || 'vertical',\n invalid: state.isInvalid,\n disabled: state.isDisabled,\n readonly: state.isReadOnly,\n required: state.isRequired\n })}\n slots={{\n label: labelProps,\n description: descriptionProps,\n error: mergeProps(errorMessageProps, validationResult)\n }}\n >\n {props.children}\n </Container>\n </RadioGroupStateContext.Provider>\n );\n});\n"],"mappings":";;;;;;;;;;;;;AAGA,MAAa,yBAAyB,MAAM,cAAsC,IAAI;;;;;;ACgCtF,MAAa,QAAQ,UAAU,cAAc,SAAS,MAAM,MAAkB;CAC5E,MAAM,EAAE,OAAO,UAAU,SAAS,IAAI;CACtC,MAAM,QAAQ,MAAM,WAAW,sBAAsB;CACrD,MAAM,MAAM,MAAM,OAAyB,IAAI;CAC/C,MAAM,WAAW,aAAa,cAAc,UAAU,KAAK,MAAM,QAAQ,GAAG,CAAC,KAAK,MAAM,QAAQ,CAAC,CAAC;CAClG,MAAM,EAAE,WAAW,gBAAgB,eAAe,aAAa;CAC/D,MAAM,EAAE,YAAY,YAAY,YAAY,cAAc,SAAS,OAAqB,OAAO,QAAQ;CACvG,MAAM,sBAAsB,MAAM,cAAc,MAAM;CACtD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,GAAG;EACH,YAAY;CACd,CAAC;CAED,OACE,qBAAC,WAAD;EACE,IAAG;EACH,GAAI,MAAM,WAAW,YAAY,UAAU,CAAC;EAC5C,GAAI,kBAAkB;GACpB,UAAU;GACV,SAAS;GACT,SAAS;GACT,SAAS;GACT,cAAc;GACd,UAAU,MAAM;GAChB,UAAU,MAAM;GAChB,SAAS,MAAM;GACf,UAAU,MAAM;EAClB,CAAC;YAbH;GAeE,oBAAC,gBAAD,EAAA,UACE,oBAAC,OAAD;IAAO,GAAI,WAAW,YAAY,UAAU;IAAG,KAAK;GAAW,CAAA,EACjD,CAAA;GAEf,aACC,oBAAC,MAAD;IAAM,MAAK;IAAe,MAAK;cAC7B,oBAAC,OAAD;KAAK,SAAQ;KAAY,OAAM;eAC7B,oBAAC,UAAD;MAAQ,IAAI;MAAI,IAAI;MAAI,GAAG,IAAI,IAAI;MAAG,MAAK;MAAO,QAAO;MAAS,aAAa;KAAI,CAAA;IAChF,CAAA;GACD,CAAA,IAEN,oBAAC,MAAD;IAAM,MAAK;IAAiB,MAAK;cAC/B,oBAAC,OAAD;KAAK,SAAQ;KAAY,OAAM;eAC7B,oBAAC,UAAD;MAAQ,IAAI;MAAI,IAAI;MAAI,GAAG;MAAG,MAAK;MAAO,QAAO;MAAO,aAAa;KAAI,CAAA;IACtE,CAAA;GACD,CAAA;GAEP,MAAM;EACE;;AAEf,CAAC;;;;;;ACxCD,MAAa,aAAa,UAAU,mBAAmB,SAAS,WAAW,MAAuB;CAChG,MAAM,EAAE,OAAO,UAAU,SAAS,IAAI;CACtC,MAAM,QAAQ,mBAAmB,KAAK;CACtC,MAAM,EAAE,iBAAiB,YAAY,kBAAkB,mBAAmB,GAAG,qBAAqB,cAChG;EAAE,GAAG;EAAO,OAAO,MAAM,SAAS;EAAe,aAAa,MAAM,eAAe;CAAc,GACjG,KACF;CAEA,OACE,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;YACtC,oBAAC,WAAD;GACE,GAAI,MAAM,eAAe;GACzB,GAAI,kBAAkB;IACpB,aAAa,MAAM,eAAe;IAClC,SAAS,MAAM;IACf,UAAU,MAAM;IAChB,UAAU,MAAM;IAChB,UAAU,MAAM;GAClB,CAAC;GACD,OAAO;IACL,OAAO;IACP,aAAa;IACb,OAAOA,aAAW,mBAAmB,gBAAgB;GACvD;aAEC,MAAM;EACE,CAAA;CACoB,CAAA;AAErC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bento/radio",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Radio component",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
7
|
-
"module": "./dist/index.
|
|
7
|
+
"module": "./dist/index.mjs",
|
|
8
8
|
"scripts": {
|
|
9
|
-
"build": "
|
|
10
|
-
"lint": "biome lint &&
|
|
9
|
+
"build": "tsdown",
|
|
10
|
+
"lint": "biome lint && tsgo --noEmit",
|
|
11
11
|
"prepublishOnly": "node ../../../scripts/compile-readme.ts",
|
|
12
12
|
"test": "vitest --run",
|
|
13
|
-
"test:watch": "vitest"
|
|
13
|
+
"test:watch": "vitest",
|
|
14
|
+
"typecheck": "tsgo --noEmit -p tsconfig.json"
|
|
14
15
|
},
|
|
15
16
|
"repository": {
|
|
16
17
|
"type": "git",
|
|
@@ -40,22 +41,22 @@
|
|
|
40
41
|
"dependencies": {
|
|
41
42
|
"@bento/container": "^0.2.1",
|
|
42
43
|
"@bento/icon": "^0.2.0",
|
|
43
|
-
"@bento/input": "^0.1.
|
|
44
|
+
"@bento/input": "^0.1.1",
|
|
44
45
|
"@bento/slots": "^0.3.0",
|
|
45
46
|
"@bento/use-data-attributes": "^0.1.1",
|
|
46
|
-
"@bento/use-props": "^0.2.
|
|
47
|
+
"@bento/use-props": "^0.2.3",
|
|
47
48
|
"@bento/visually-hidden": "^0.1.1",
|
|
48
|
-
"@react-aria/utils": "^3.
|
|
49
|
-
"react-aria": "^3.
|
|
50
|
-
"react-stately": "^3.
|
|
49
|
+
"@react-aria/utils": "^3.34.0",
|
|
50
|
+
"react-aria": "^3.48.0",
|
|
51
|
+
"react-stately": "^3.46.0"
|
|
51
52
|
},
|
|
52
53
|
"devDependencies": {
|
|
53
|
-
"@types/react": "^19.2.
|
|
54
|
+
"@types/react": "^19.2.15",
|
|
54
55
|
"@types/react-dom": "^19.2.3",
|
|
55
|
-
"
|
|
56
|
-
"typescript": "^
|
|
57
|
-
"vitest": "^4.
|
|
58
|
-
"vitest-browser-react": "^2.
|
|
56
|
+
"tsdown": "^0.22.1",
|
|
57
|
+
"typescript": "^6.0.3",
|
|
58
|
+
"vitest": "^4.1.7",
|
|
59
|
+
"vitest-browser-react": "^2.2.0"
|
|
59
60
|
},
|
|
60
61
|
"peerDependencies": {
|
|
61
62
|
"react": "18.x || 19.x",
|
|
@@ -64,8 +65,8 @@
|
|
|
64
65
|
"exports": {
|
|
65
66
|
".": {
|
|
66
67
|
"import": {
|
|
67
|
-
"types": "./dist/index.d.
|
|
68
|
-
"default": "./dist/index.
|
|
68
|
+
"types": "./dist/index.d.mts",
|
|
69
|
+
"default": "./dist/index.mjs"
|
|
69
70
|
},
|
|
70
71
|
"require": {
|
|
71
72
|
"types": "./dist/index.d.cts",
|
package/dist/index.d.ts
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ContainerProps } from '@bento/container';
|
|
3
|
-
import { AriaRadioProps, AriaRadioGroupProps } from 'react-aria';
|
|
4
|
-
|
|
5
|
-
interface RadioProps extends AriaRadioProps, Omit<ContainerProps, keyof AriaRadioProps> {
|
|
6
|
-
/** The value of the radio button, used when submitting an HTML form. */
|
|
7
|
-
value: string;
|
|
8
|
-
/** A ref for the HTML input element. */
|
|
9
|
-
inputRef?: React.Ref<HTMLInputElement>;
|
|
10
|
-
/** The label for the Radio. Accepts any renderable node. */
|
|
11
|
-
children?: React.ReactNode;
|
|
12
|
-
/**
|
|
13
|
-
* Whether the radio button is disabled or not. Shows that a selection exists,
|
|
14
|
-
* but is not available in that circumstance.
|
|
15
|
-
*/
|
|
16
|
-
isDisabled?: boolean;
|
|
17
|
-
/** Whether the element should receive focus on render. */
|
|
18
|
-
autoFocus?: boolean;
|
|
19
|
-
}
|
|
20
|
-
/**
|
|
21
|
-
* The `Radio` is a single radio option that can be selected by the user.
|
|
22
|
-
*/
|
|
23
|
-
declare const Radio: React.MemoExoticComponent<React.ComponentType<any>>;
|
|
24
|
-
|
|
25
|
-
interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, keyof AriaRadioGroupProps> {
|
|
26
|
-
/** The current value (controlled). */
|
|
27
|
-
value?: string;
|
|
28
|
-
/** The default value (uncontrolled). */
|
|
29
|
-
defaultValue?: string;
|
|
30
|
-
/** Whether the input is disabled. */
|
|
31
|
-
isDisabled?: boolean;
|
|
32
|
-
/** Whether the input can be selected but not changed by the user. */
|
|
33
|
-
isReadOnly?: boolean;
|
|
34
|
-
/** Whether user input is required on the input before form submission. */
|
|
35
|
-
isRequired?: boolean;
|
|
36
|
-
/** Whether the input value is invalid. */
|
|
37
|
-
isInvalid?: boolean;
|
|
38
|
-
/** The name of the input element, used when submitting an HTML form. */
|
|
39
|
-
name?: string;
|
|
40
|
-
/**
|
|
41
|
-
* The `<form>` element to associate the input with.
|
|
42
|
-
* The value of this attribute must be the id of a `<form>` in the same document.
|
|
43
|
-
*/
|
|
44
|
-
form?: string;
|
|
45
|
-
/** Radio children. */
|
|
46
|
-
children: React.ReactNode;
|
|
47
|
-
}
|
|
48
|
-
/**
|
|
49
|
-
* The `RadioGroup` allows a user to select a single item from a list of `Radio` components.
|
|
50
|
-
*/
|
|
51
|
-
declare const RadioGroup: React.MemoExoticComponent<React.ComponentType<any>>;
|
|
52
|
-
|
|
53
|
-
export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };
|
package/dist/index.js
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import React2, { useMemo } from 'react';
|
|
2
|
-
import { Container } from '@bento/container';
|
|
3
|
-
import { useDataAttributes } from '@bento/use-data-attributes';
|
|
4
|
-
import { Icon } from '@bento/icon';
|
|
5
|
-
import { Input } from '@bento/input';
|
|
6
|
-
import { withSlots } from '@bento/slots';
|
|
7
|
-
import { useProps } from '@bento/use-props';
|
|
8
|
-
import { VisuallyHidden } from '@bento/visually-hidden';
|
|
9
|
-
import { useObjectRef, mergeRefs, mergeProps } from '@react-aria/utils';
|
|
10
|
-
import { useFocusRing, useRadio, useHover, useRadioGroup, mergeProps as mergeProps$1 } from 'react-aria';
|
|
11
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
12
|
-
import { useRadioGroupState } from 'react-stately';
|
|
13
|
-
|
|
14
|
-
// src/radio.tsx
|
|
15
|
-
var RadioGroupStateContext = React2.createContext(null);
|
|
16
|
-
var Radio = withSlots("BentoRadio", function Radio2(args) {
|
|
17
|
-
const { props, apply } = useProps(args);
|
|
18
|
-
const state = React2.useContext(RadioGroupStateContext);
|
|
19
|
-
const ref = React2.useRef(null);
|
|
20
|
-
const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));
|
|
21
|
-
const { isFocused, isFocusVisible, focusProps } = useFocusRing();
|
|
22
|
-
const { inputProps, labelProps, isSelected, isPressed } = useRadio(props, state, inputRef);
|
|
23
|
-
const interactionDisabled = props.isDisabled || state.isReadOnly;
|
|
24
|
-
const { hoverProps, isHovered } = useHover({
|
|
25
|
-
...props,
|
|
26
|
-
isDisabled: interactionDisabled
|
|
27
|
-
});
|
|
28
|
-
return /* @__PURE__ */ jsxs(
|
|
29
|
-
Container,
|
|
30
|
-
{
|
|
31
|
-
as: "label",
|
|
32
|
-
...apply(mergeProps(labelProps, hoverProps)),
|
|
33
|
-
...useDataAttributes({
|
|
34
|
-
selected: isSelected,
|
|
35
|
-
pressed: isPressed,
|
|
36
|
-
hovered: isHovered,
|
|
37
|
-
focused: isFocused,
|
|
38
|
-
focusVisible: isFocusVisible,
|
|
39
|
-
disabled: props.isDisabled,
|
|
40
|
-
readonly: state.isReadOnly,
|
|
41
|
-
invalid: state.isInvalid,
|
|
42
|
-
required: state.isRequired
|
|
43
|
-
}),
|
|
44
|
-
children: [
|
|
45
|
-
/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Input, { ...mergeProps(inputProps, focusProps), ref: inputRef }) }),
|
|
46
|
-
isSelected ? /* @__PURE__ */ jsx(Icon, { slot: "icon-checked", icon: "radioChecked", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 8 - 6 / 2, fill: "none", stroke: "orange", strokeWidth: 6 }) }) }) : /* @__PURE__ */ jsx(Icon, { slot: "icon-unchecked", icon: "radioUnchecked", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 8, fill: "none", stroke: "gray", strokeWidth: 2 }) }) }),
|
|
47
|
-
props.children
|
|
48
|
-
]
|
|
49
|
-
}
|
|
50
|
-
);
|
|
51
|
-
});
|
|
52
|
-
var RadioGroup = withSlots("BentoRadioGroup", function RadioGroup2(args) {
|
|
53
|
-
const { props, apply } = useProps(args);
|
|
54
|
-
const state = useRadioGroupState(props);
|
|
55
|
-
const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(
|
|
56
|
-
{ ...props, label: props.label ?? "Radio Group", description: props.description ?? "Description" },
|
|
57
|
-
state
|
|
58
|
-
);
|
|
59
|
-
return /* @__PURE__ */ jsx(RadioGroupStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(
|
|
60
|
-
Container,
|
|
61
|
-
{
|
|
62
|
-
...apply(radioGroupProps),
|
|
63
|
-
...useDataAttributes({
|
|
64
|
-
orientation: props.orientation || "vertical",
|
|
65
|
-
invalid: state.isInvalid,
|
|
66
|
-
disabled: state.isDisabled,
|
|
67
|
-
readonly: state.isReadOnly,
|
|
68
|
-
required: state.isRequired
|
|
69
|
-
}),
|
|
70
|
-
slots: {
|
|
71
|
-
label: labelProps,
|
|
72
|
-
description: descriptionProps,
|
|
73
|
-
error: mergeProps$1(errorMessageProps, validationResult)
|
|
74
|
-
},
|
|
75
|
-
children: props.children
|
|
76
|
-
}
|
|
77
|
-
) });
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
export { Radio, RadioGroup };
|
|
81
|
-
//# sourceMappingURL=index.js.map
|
|
82
|
-
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/radio-group-state.tsx","../src/radio.tsx","../src/radio-group.tsx"],"names":["React","Radio","withSlots","RadioGroup","useProps","jsx","Container","useDataAttributes","mergeProps"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { RadioGroupState } from 'react-stately';\n\nexport const RadioGroupStateContext = React.createContext<RadioGroupState | null>(null);\n","import React, { useMemo } from 'react';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { Icon } from '@bento/icon';\nimport { Input } from '@bento/input';\nimport { withSlots } from '@bento/slots';\nimport { useProps } from '@bento/use-props';\nimport { VisuallyHidden } from '@bento/visually-hidden';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useFocusRing, useHover, useRadio, type AriaRadioProps } from 'react-aria';\nimport { RadioGroupStateContext } from './radio-group-state';\n\nexport interface RadioProps extends AriaRadioProps, Omit<ContainerProps, keyof AriaRadioProps> {\n /** The value of the radio button, used when submitting an HTML form. */\n value: string;\n\n /** A ref for the HTML input element. */\n inputRef?: React.Ref<HTMLInputElement>;\n\n /** The label for the Radio. Accepts any renderable node. */\n children?: React.ReactNode;\n\n /**\n * Whether the radio button is disabled or not. Shows that a selection exists,\n * but is not available in that circumstance.\n */\n isDisabled?: boolean;\n\n /** Whether the element should receive focus on render. */\n autoFocus?: boolean;\n}\n\n/**\n * The `Radio` is a single radio option that can be selected by the user.\n */\nexport const Radio = withSlots('BentoRadio', function Radio(args: RadioProps) {\n const { props, apply } = useProps(args);\n const state = React.useContext(RadioGroupStateContext)!;\n const ref = React.useRef<HTMLInputElement>(null);\n const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n const { inputProps, labelProps, isSelected, isPressed } = useRadio(props as RadioProps, state, inputRef);\n const interactionDisabled = props.isDisabled || state.isReadOnly;\n const { hoverProps, isHovered } = useHover({\n ...props,\n isDisabled: interactionDisabled\n });\n\n return (\n <Container\n as=\"label\"\n {...apply(mergeProps(labelProps, hoverProps))}\n {...useDataAttributes({\n selected: isSelected,\n pressed: isPressed,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: props.isDisabled,\n readonly: state.isReadOnly,\n invalid: state.isInvalid,\n required: state.isRequired\n })}\n >\n <VisuallyHidden>\n <Input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n </VisuallyHidden>\n\n {isSelected ? (\n <Icon slot=\"icon-checked\" icon=\"radioChecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx={12} cy={12} r={8 - 6 / 2} fill=\"none\" stroke=\"orange\" strokeWidth={6} />\n </svg>\n </Icon>\n ) : (\n <Icon slot=\"icon-unchecked\" icon=\"radioUnchecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx={12} cy={12} r={8} fill=\"none\" stroke=\"gray\" strokeWidth={2} />\n </svg>\n </Icon>\n )}\n {props.children}\n </Container>\n );\n});\n","import React from 'react';\nimport { withSlots } from '@bento/slots';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useProps } from '@bento/use-props';\nimport { useRadioGroup, mergeProps, type AriaRadioGroupProps } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\nimport { RadioGroupStateContext } from './radio-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, Omit<ContainerProps, keyof AriaRadioGroupProps> {\n /** The current value (controlled). */\n value?: string;\n\n /** The default value (uncontrolled). */\n defaultValue?: string;\n\n /** Whether the input is disabled. */\n isDisabled?: boolean;\n\n /** Whether the input can be selected but not changed by the user. */\n isReadOnly?: boolean;\n\n /** Whether user input is required on the input before form submission. */\n isRequired?: boolean;\n\n /** Whether the input value is invalid. */\n isInvalid?: boolean;\n\n /** The name of the input element, used when submitting an HTML form. */\n name?: string;\n\n /**\n * The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n */\n form?: string;\n\n /** Radio children. */\n children: React.ReactNode;\n}\n\n/**\n * The `RadioGroup` allows a user to select a single item from a list of `Radio` components.\n */\nexport const RadioGroup = withSlots('BentoRadioGroup', function RadioGroup(args: RadioGroupProps) {\n const { props, apply } = useProps(args);\n const state = useRadioGroupState(props);\n const { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useRadioGroup(\n { ...props, label: props.label ?? 'Radio Group', description: props.description ?? 'Description' },\n state\n );\n\n return (\n <RadioGroupStateContext.Provider value={state}>\n <Container\n {...apply(radioGroupProps)}\n {...useDataAttributes({\n orientation: props.orientation || 'vertical',\n invalid: state.isInvalid,\n disabled: state.isDisabled,\n readonly: state.isReadOnly,\n required: state.isRequired\n })}\n slots={{\n label: labelProps,\n description: descriptionProps,\n error: mergeProps(errorMessageProps, validationResult)\n }}\n >\n {props.children}\n </Container>\n </RadioGroupStateContext.Provider>\n );\n});\n"]}
|