@huin-core/react-checkbox 1.0.2 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.mts +38 -0
- package/dist/index.d.ts +38 -0
- package/dist/index.js +203 -0
- package/dist/index.js.map +7 -0
- package/dist/index.mjs +171 -0
- package/dist/index.mjs.map +7 -0
- package/package.json +1 -1
package/dist/index.d.mts
ADDED
@@ -0,0 +1,38 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import React__default from 'react';
|
3
|
+
import { Primitive } from '@huin-core/react-primitive';
|
4
|
+
|
5
|
+
type Scope<C = any> = {
|
6
|
+
[scopeName: string]: React.Context<C>[];
|
7
|
+
} | undefined;
|
8
|
+
type ScopeHook = (scope: Scope) => {
|
9
|
+
[__scopeProp: string]: Scope;
|
10
|
+
};
|
11
|
+
interface CreateScope {
|
12
|
+
scopeName: string;
|
13
|
+
(): ScopeHook;
|
14
|
+
}
|
15
|
+
|
16
|
+
declare const createCheckboxScope: CreateScope;
|
17
|
+
type CheckedState = boolean | "indeterminate";
|
18
|
+
type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
|
19
|
+
interface CheckboxProps extends Omit<PrimitiveButtonProps, "checked" | "defaultChecked"> {
|
20
|
+
checked?: CheckedState;
|
21
|
+
defaultChecked?: CheckedState;
|
22
|
+
required?: boolean;
|
23
|
+
onCheckedChange?(checked: CheckedState): void;
|
24
|
+
}
|
25
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
26
|
+
declare const Root: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
27
|
+
|
28
|
+
type PrimitiveSpanProps = React__default.ComponentPropsWithoutRef<typeof Primitive.span>;
|
29
|
+
interface CheckboxIndicatorProps extends PrimitiveSpanProps {
|
30
|
+
/**
|
31
|
+
* Used to force mounting when more control is needed. Useful when
|
32
|
+
* controlling animation with React animation libraries.
|
33
|
+
*/
|
34
|
+
forceMount?: true;
|
35
|
+
}
|
36
|
+
declare const CheckboxIndicator: React__default.ForwardRefExoticComponent<CheckboxIndicatorProps & React__default.RefAttributes<HTMLSpanElement>>;
|
37
|
+
|
38
|
+
export { Checkbox, CheckboxIndicator, type CheckboxIndicatorProps, type CheckboxProps, type CheckedState, Root, createCheckboxScope };
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,38 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import React__default from 'react';
|
3
|
+
import { Primitive } from '@huin-core/react-primitive';
|
4
|
+
|
5
|
+
type Scope<C = any> = {
|
6
|
+
[scopeName: string]: React.Context<C>[];
|
7
|
+
} | undefined;
|
8
|
+
type ScopeHook = (scope: Scope) => {
|
9
|
+
[__scopeProp: string]: Scope;
|
10
|
+
};
|
11
|
+
interface CreateScope {
|
12
|
+
scopeName: string;
|
13
|
+
(): ScopeHook;
|
14
|
+
}
|
15
|
+
|
16
|
+
declare const createCheckboxScope: CreateScope;
|
17
|
+
type CheckedState = boolean | "indeterminate";
|
18
|
+
type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
|
19
|
+
interface CheckboxProps extends Omit<PrimitiveButtonProps, "checked" | "defaultChecked"> {
|
20
|
+
checked?: CheckedState;
|
21
|
+
defaultChecked?: CheckedState;
|
22
|
+
required?: boolean;
|
23
|
+
onCheckedChange?(checked: CheckedState): void;
|
24
|
+
}
|
25
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
26
|
+
declare const Root: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
27
|
+
|
28
|
+
type PrimitiveSpanProps = React__default.ComponentPropsWithoutRef<typeof Primitive.span>;
|
29
|
+
interface CheckboxIndicatorProps extends PrimitiveSpanProps {
|
30
|
+
/**
|
31
|
+
* Used to force mounting when more control is needed. Useful when
|
32
|
+
* controlling animation with React animation libraries.
|
33
|
+
*/
|
34
|
+
forceMount?: true;
|
35
|
+
}
|
36
|
+
declare const CheckboxIndicator: React__default.ForwardRefExoticComponent<CheckboxIndicatorProps & React__default.RefAttributes<HTMLSpanElement>>;
|
37
|
+
|
38
|
+
export { Checkbox, CheckboxIndicator, type CheckboxIndicatorProps, type CheckboxProps, type CheckedState, Root, createCheckboxScope };
|
package/dist/index.js
ADDED
@@ -0,0 +1,203 @@
|
|
1
|
+
"use strict";
|
2
|
+
"use client";
|
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 __export = (target, all) => {
|
10
|
+
for (var name in all)
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
12
|
+
};
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
15
|
+
for (let key of __getOwnPropNames(from))
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
18
|
+
}
|
19
|
+
return to;
|
20
|
+
};
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
27
|
+
mod
|
28
|
+
));
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
30
|
+
|
31
|
+
// packages/react/checkbox/src/index.ts
|
32
|
+
var src_exports = {};
|
33
|
+
__export(src_exports, {
|
34
|
+
Checkbox: () => Checkbox,
|
35
|
+
CheckboxIndicator: () => CheckboxIndicator,
|
36
|
+
Root: () => Root,
|
37
|
+
createCheckboxScope: () => createCheckboxScope
|
38
|
+
});
|
39
|
+
module.exports = __toCommonJS(src_exports);
|
40
|
+
|
41
|
+
// packages/react/checkbox/src/Checkbox.tsx
|
42
|
+
var React = __toESM(require("react"));
|
43
|
+
var import_react_use_previous = require("@huin-core/react-use-previous");
|
44
|
+
var import_react_use_size = require("@huin-core/react-use-size");
|
45
|
+
var import_react_primitive = require("@huin-core/react-primitive");
|
46
|
+
var import_primitive = require("@huin-core/primitive");
|
47
|
+
var import_react_context = require("@huin-core/react-context");
|
48
|
+
var import_react_compose_refs = require("@huin-core/react-compose-refs");
|
49
|
+
var import_react_use_controllable_state = require("@huin-core/react-use-controllable-state");
|
50
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
51
|
+
var CHECKBOX_NAME = "Checkbox";
|
52
|
+
var [createCheckboxContext, createCheckboxScope] = (0, import_react_context.createContextScope)(CHECKBOX_NAME);
|
53
|
+
var [CheckboxProvider, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
|
54
|
+
var Checkbox = React.forwardRef(
|
55
|
+
(props, forwardedRef) => {
|
56
|
+
const {
|
57
|
+
__scopeCheckbox,
|
58
|
+
name,
|
59
|
+
checked: checkedProp,
|
60
|
+
defaultChecked,
|
61
|
+
required,
|
62
|
+
disabled,
|
63
|
+
value = "on",
|
64
|
+
onCheckedChange,
|
65
|
+
form,
|
66
|
+
...checkboxProps
|
67
|
+
} = props;
|
68
|
+
const [button, setButton] = React.useState(null);
|
69
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(
|
70
|
+
forwardedRef,
|
71
|
+
(node) => setButton(node)
|
72
|
+
);
|
73
|
+
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
74
|
+
const isFormControl = button ? Boolean(button.closest("form")) : true;
|
75
|
+
const [checked = false, setChecked] = (0, import_react_use_controllable_state.useControllableState)({
|
76
|
+
prop: checkedProp,
|
77
|
+
defaultProp: defaultChecked,
|
78
|
+
onChange: onCheckedChange
|
79
|
+
});
|
80
|
+
const initialCheckedStateRef = React.useRef(checked);
|
81
|
+
React.useEffect(() => {
|
82
|
+
const form2 = button?.form;
|
83
|
+
if (form2) {
|
84
|
+
const reset = () => setChecked(initialCheckedStateRef.current);
|
85
|
+
form2.addEventListener("reset", reset);
|
86
|
+
return () => form2.removeEventListener("reset", reset);
|
87
|
+
}
|
88
|
+
}, [button, setChecked]);
|
89
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CheckboxProvider, { scope: __scopeCheckbox, state: checked, disabled, children: [
|
90
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
91
|
+
import_react_primitive.Primitive.button,
|
92
|
+
{
|
93
|
+
type: "button",
|
94
|
+
role: "checkbox",
|
95
|
+
"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
|
96
|
+
"aria-required": required,
|
97
|
+
"data-state": getState(checked),
|
98
|
+
"data-disabled": disabled ? "" : void 0,
|
99
|
+
disabled,
|
100
|
+
value,
|
101
|
+
...checkboxProps,
|
102
|
+
ref: composedRefs,
|
103
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
104
|
+
if (event.key === "Enter") event.preventDefault();
|
105
|
+
}),
|
106
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, (event) => {
|
107
|
+
setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
|
108
|
+
if (isFormControl) {
|
109
|
+
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
110
|
+
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
|
111
|
+
}
|
112
|
+
})
|
113
|
+
}
|
114
|
+
),
|
115
|
+
isFormControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
116
|
+
BubbleInput,
|
117
|
+
{
|
118
|
+
control: button,
|
119
|
+
bubbles: !hasConsumerStoppedPropagationRef.current,
|
120
|
+
name,
|
121
|
+
value,
|
122
|
+
checked,
|
123
|
+
required,
|
124
|
+
disabled,
|
125
|
+
form,
|
126
|
+
style: { transform: "translateX(-100%)" },
|
127
|
+
defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked
|
128
|
+
}
|
129
|
+
)
|
130
|
+
] });
|
131
|
+
}
|
132
|
+
);
|
133
|
+
Checkbox.displayName = CHECKBOX_NAME;
|
134
|
+
var BubbleInput = (props) => {
|
135
|
+
const { control, checked, bubbles = true, ...inputProps } = props;
|
136
|
+
const ref = React.useRef(null);
|
137
|
+
const prevChecked = (0, import_react_use_previous.usePrevious)(checked);
|
138
|
+
const controlSize = (0, import_react_use_size.useSize)(control);
|
139
|
+
React.useEffect(() => {
|
140
|
+
const input = ref.current;
|
141
|
+
const inputProto = window.HTMLInputElement.prototype;
|
142
|
+
const descriptor = Object.getOwnPropertyDescriptor(
|
143
|
+
inputProto,
|
144
|
+
"checked"
|
145
|
+
);
|
146
|
+
const setChecked = descriptor.set;
|
147
|
+
if (prevChecked !== checked && setChecked) {
|
148
|
+
const event = new Event("click", { bubbles });
|
149
|
+
input.indeterminate = isIndeterminate(checked);
|
150
|
+
setChecked.call(input, isIndeterminate(checked) ? false : checked);
|
151
|
+
input.dispatchEvent(event);
|
152
|
+
}
|
153
|
+
}, [prevChecked, checked, bubbles]);
|
154
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
155
|
+
"input",
|
156
|
+
{
|
157
|
+
type: "checkbox",
|
158
|
+
"aria-hidden": true,
|
159
|
+
defaultChecked: isIndeterminate(checked) ? false : checked,
|
160
|
+
...inputProps,
|
161
|
+
tabIndex: -1,
|
162
|
+
ref,
|
163
|
+
style: {
|
164
|
+
...props.style,
|
165
|
+
...controlSize,
|
166
|
+
position: "absolute",
|
167
|
+
pointerEvents: "none",
|
168
|
+
opacity: 0,
|
169
|
+
margin: 0
|
170
|
+
}
|
171
|
+
}
|
172
|
+
);
|
173
|
+
};
|
174
|
+
function isIndeterminate(checked) {
|
175
|
+
return checked === "indeterminate";
|
176
|
+
}
|
177
|
+
function getState(checked) {
|
178
|
+
return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
|
179
|
+
}
|
180
|
+
var Root = Checkbox;
|
181
|
+
|
182
|
+
// packages/react/checkbox/src/CheckboxIndicator.tsx
|
183
|
+
var import_react = __toESM(require("react"));
|
184
|
+
var import_react_presence = require("@huin-core/react-presence");
|
185
|
+
var import_react_primitive2 = require("@huin-core/react-primitive");
|
186
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
187
|
+
var INDICATOR_NAME = "CheckboxIndicator";
|
188
|
+
var CheckboxIndicator = import_react.default.forwardRef((props, forwardedRef) => {
|
189
|
+
const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
|
190
|
+
const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
|
191
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_presence.Presence, { present: forceMount || isIndeterminate(context.state) || context.state === true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
192
|
+
import_react_primitive2.Primitive.span,
|
193
|
+
{
|
194
|
+
"data-state": getState(context.state),
|
195
|
+
"data-disabled": context.disabled ? "" : void 0,
|
196
|
+
...indicatorProps,
|
197
|
+
ref: forwardedRef,
|
198
|
+
style: { pointerEvents: "none", ...props.style }
|
199
|
+
}
|
200
|
+
) });
|
201
|
+
});
|
202
|
+
CheckboxIndicator.displayName = INDICATOR_NAME;
|
203
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/index.ts", "../src/Checkbox.tsx", "../src/CheckboxIndicator.tsx"],
|
4
|
+
"sourcesContent": ["\"use client\";\nexport {\n createCheckboxScope,\n //\n Checkbox,\n //\n Root,\n} from \"./Checkbox\";\nexport { CheckboxIndicator } from \"./CheckboxIndicator\";\nexport type { CheckboxIndicatorProps } from \"./CheckboxIndicator\";\nexport type { CheckboxProps, CheckedState } from \"./Checkbox\";\n", "import * as React from \"react\";\nimport { usePrevious } from \"@huin-core/react-use-previous\";\nimport { useSize } from \"@huin-core/react-use-size\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\nimport { createContextScope, Scope } from \"@huin-core/react-context\";\nimport { useComposedRefs } from \"@huin-core/react-compose-refs\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_NAME = \"Checkbox\";\n\nexport type ScopedProps<P> = P & { __scopeCheckbox?: Scope };\nconst [createCheckboxContext, createCheckboxScope] =\n createContextScope(CHECKBOX_NAME);\n\ntype CheckedState = boolean | \"indeterminate\";\n\ntype CheckboxContextValue = {\n state: CheckedState;\n disabled?: boolean;\n};\n\nexport const [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\ntype CheckboxElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n typeof Primitive.button\n>;\ninterface CheckboxProps\n extends Omit<PrimitiveButtonProps, \"checked\" | \"defaultChecked\"> {\n checked?: CheckedState;\n defaultChecked?: CheckedState;\n required?: boolean;\n onCheckedChange?(checked: CheckedState): void;\n}\n\nconst Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(\n (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = \"on\",\n onCheckedChange,\n form,\n ...checkboxProps\n } = props;\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) =>\n setButton(node)\n );\n const hasConsumerStoppedPropagationRef = React.useRef(false);\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = button ? Boolean(button.closest(\"form\")) : true;\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked,\n onChange: onCheckedChange,\n });\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = button?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener(\"reset\", reset);\n return () => form.removeEventListener(\"reset\", reset);\n }\n }, [button, setChecked]);\n\n return (\n <CheckboxProvider scope={__scopeCheckbox} state={checked} disabled={disabled}>\n <Primitive.button\n type=\"button\"\n role=\"checkbox\"\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...checkboxProps}\n ref={composedRefs}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault();\n })}\n onClick={composeEventHandlers(props.onClick, (event) => {\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n {isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n form={form}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n defaultChecked={isIndeterminate(defaultChecked) ? false : defaultChecked}\n />\n )}\n </CheckboxProvider>\n );\n }\n);\n\nCheckbox.displayName = CHECKBOX_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = React.ComponentPropsWithoutRef<\"input\">;\ninterface BubbleInputProps extends Omit<InputProps, \"checked\"> {\n checked: CheckedState;\n control: HTMLElement | null;\n bubbles: boolean;\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props;\n const ref = React.useRef<HTMLInputElement>(null);\n const prevChecked = usePrevious(checked);\n const controlSize = useSize(control);\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!;\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n \"checked\"\n ) as PropertyDescriptor;\n const setChecked = descriptor.set;\n\n if (prevChecked !== checked && setChecked) {\n const event = new Event(\"click\", { bubbles });\n input.indeterminate = isIndeterminate(checked);\n setChecked.call(input, isIndeterminate(checked) ? false : checked);\n input.dispatchEvent(event);\n }\n }, [prevChecked, checked, bubbles]);\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={isIndeterminate(checked) ? false : checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n ...controlSize,\n position: \"absolute\",\n pointerEvents: \"none\",\n opacity: 0,\n margin: 0,\n }}\n />\n );\n};\n\nexport function isIndeterminate(\n checked?: CheckedState\n): checked is \"indeterminate\" {\n return checked === \"indeterminate\";\n}\n\nexport function getState(checked: CheckedState) {\n return isIndeterminate(checked)\n ? \"indeterminate\"\n : checked\n ? \"checked\"\n : \"unchecked\";\n}\n\nconst Root = Checkbox;\n\nexport {\n createCheckboxScope,\n //\n Checkbox,\n //\n Root,\n};\nexport type { CheckboxProps, CheckedState };\n", "import React from \"react\";\nimport { Presence } from \"@huin-core/react-presence\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport {\n getState,\n isIndeterminate,\n ScopedProps,\n useCheckboxContext,\n} from \"./Checkbox\";\n\nconst INDICATOR_NAME = \"CheckboxIndicator\";\n\ntype CheckboxIndicatorElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface CheckboxIndicatorProps extends PrimitiveSpanProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst CheckboxIndicator = React.forwardRef<\n CheckboxIndicatorElement,\n CheckboxIndicatorProps\n>((props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const { __scopeCheckbox, forceMount, ...indicatorProps } = props;\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);\n return (\n <Presence present={forceMount || isIndeterminate(context.state) || context.state === true}>\n <Primitive.span\n data-state={getState(context.state)}\n data-disabled={context.disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n style={{ pointerEvents: 'none', ...props.style }}\n />\n </Presence>\n );\n});\n\nCheckboxIndicator.displayName = INDICATOR_NAME;\n\nexport { CheckboxIndicator };\nexport type {CheckboxIndicatorProps}\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,gCAA4B;AAC5B,4BAAwB;AACxB,6BAA0B;AAC1B,uBAAqC;AACrC,2BAA0C;AAC1C,gCAAgC;AAChC,0CAAqC;AAuE/B;AAjEN,IAAM,gBAAgB;AAGtB,IAAM,CAAC,uBAAuB,mBAAmB,QAC/C,yCAAmB,aAAa;AAS3B,IAAM,CAAC,kBAAkB,kBAAkB,IAChD,sBAA4C,aAAa;AAc3D,IAAM,WAAiB;AAAA,EACrB,CAAC,OAAmC,iBAAiB;AACnD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,CAAC,QAAQ,SAAS,IAAU,eAAmC,IAAI;AACzE,UAAM,mBAAe;AAAA,MAAgB;AAAA,MAAc,CAAC,SAClD,UAAU,IAAI;AAAA,IAChB;AACA,UAAM,mCAAyC,aAAO,KAAK;AAE3D,UAAM,gBAAgB,SAAS,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAAI;AACjE,UAAM,CAAC,UAAU,OAAO,UAAU,QAAI,0DAAqB;AAAA,MACzD,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACZ,CAAC;AACD,UAAM,yBAA+B,aAAO,OAAO;AACnD,IAAM,gBAAU,MAAM;AACpB,YAAMA,QAAO,QAAQ;AACrB,UAAIA,OAAM;AACR,cAAM,QAAQ,MAAM,WAAW,uBAAuB,OAAO;AAC7D,QAAAA,MAAK,iBAAiB,SAAS,KAAK;AACpC,eAAO,MAAMA,MAAK,oBAAoB,SAAS,KAAK;AAAA,MACtD;AAAA,IACF,GAAG,CAAC,QAAQ,UAAU,CAAC;AAEvB,WACE,6CAAC,oBAAiB,OAAO,iBAAiB,OAAO,SAAS,UACxD;AAAA;AAAA,QAAC,iCAAU;AAAA,QAAV;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,gBAAc,gBAAgB,OAAO,IAAI,UAAU;AAAA,UACnD,iBAAe;AAAA,UACf,cAAY,SAAS,OAAO;AAAA,UAC5B,iBAAe,WAAW,KAAK;AAAA,UAC/B;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,eAAW,uCAAqB,MAAM,WAAW,CAAC,UAAU;AAE1D,gBAAI,MAAM,QAAQ,QAAS,OAAM,eAAe;AAAA,UAClD,CAAC;AAAA,UACD,aAAS,uCAAqB,MAAM,SAAS,CAAC,UAAU;AACtD,uBAAW,CAAC,gBAAiB,gBAAgB,WAAW,IAAI,OAAO,CAAC,WAAY;AAChF,gBAAI,eAAe;AACjB,+CAAiC,UAAU,MAAM,qBAAqB;AAItE,kBAAI,CAAC,iCAAiC,QAAS,OAAM,gBAAgB;AAAA,YACvE;AAAA,UACF,CAAC;AAAA;AAAA,MACH;AAAA,MACC,iBACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,SAAS,CAAC,iCAAiC;AAAA,UAC3C;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAIA,OAAO,EAAE,WAAW,oBAAoB;AAAA,UACxC,gBAAgB,gBAAgB,cAAc,IAAI,QAAQ;AAAA;AAAA,MAC5D;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAWvB,IAAM,cAAc,CAAC,UAA4B;AAC/C,QAAM,EAAE,SAAS,SAAS,UAAU,MAAM,GAAG,WAAW,IAAI;AAC5D,QAAM,MAAY,aAAyB,IAAI;AAC/C,QAAM,kBAAc,uCAAY,OAAO;AACvC,QAAM,kBAAc,+BAAQ,OAAO;AAGnC,EAAM,gBAAU,MAAM;AACpB,UAAM,QAAQ,IAAI;AAClB,UAAM,aAAa,OAAO,iBAAiB;AAC3C,UAAM,aAAa,OAAO;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AACA,UAAM,aAAa,WAAW;AAE9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,YAAM,gBAAgB,gBAAgB,OAAO;AAC7C,iBAAW,KAAK,OAAO,gBAAgB,OAAO,IAAI,QAAQ,OAAO;AACjE,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAW;AAAA,MACX,gBAAgB,gBAAgB,OAAO,IAAI,QAAQ;AAAA,MAClD,GAAG;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,GAAG,MAAM;AAAA,QACT,GAAG;AAAA,QACH,UAAU;AAAA,QACV,eAAe;AAAA,QACf,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,gBACd,SAC4B;AAC5B,SAAO,YAAY;AACrB;AAEO,SAAS,SAAS,SAAuB;AAC9C,SAAO,gBAAgB,OAAO,IAC1B,kBACA,UACA,YACA;AACN;AAEA,IAAM,OAAO;;;ACpMb,mBAAkB;AAClB,4BAAyB;AACzB,IAAAC,0BAA0B;AA4BpB,IAAAC,sBAAA;AApBN,IAAM,iBAAiB;AAYvB,IAAM,oBAAoB,aAAAC,QAAM,WAG9B,CAAC,OAA4C,iBAAiB;AAC9D,QAAM,EAAE,iBAAiB,YAAY,GAAG,eAAe,IAAI;AAC3D,QAAM,UAAU,mBAAmB,gBAAgB,eAAe;AAClE,SACE,6CAAC,kCAAS,SAAS,cAAc,gBAAgB,QAAQ,KAAK,KAAK,QAAQ,UAAU,MACnF;AAAA,IAAC,kCAAU;AAAA,IAAV;AAAA,MACC,cAAY,SAAS,QAAQ,KAAK;AAAA,MAClC,iBAAe,QAAQ,WAAW,KAAK;AAAA,MACtC,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO,EAAE,eAAe,QAAQ,GAAG,MAAM,MAAM;AAAA;AAAA,EACjD,GACF;AAEJ,CAAC;AAED,kBAAkB,cAAc;",
|
6
|
+
"names": ["form", "import_react_primitive", "import_jsx_runtime", "React"]
|
7
|
+
}
|
package/dist/index.mjs
ADDED
@@ -0,0 +1,171 @@
|
|
1
|
+
"use client";
|
2
|
+
|
3
|
+
// packages/react/checkbox/src/Checkbox.tsx
|
4
|
+
import * as React from "react";
|
5
|
+
import { usePrevious } from "@huin-core/react-use-previous";
|
6
|
+
import { useSize } from "@huin-core/react-use-size";
|
7
|
+
import { Primitive } from "@huin-core/react-primitive";
|
8
|
+
import { composeEventHandlers } from "@huin-core/primitive";
|
9
|
+
import { createContextScope } from "@huin-core/react-context";
|
10
|
+
import { useComposedRefs } from "@huin-core/react-compose-refs";
|
11
|
+
import { useControllableState } from "@huin-core/react-use-controllable-state";
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
13
|
+
var CHECKBOX_NAME = "Checkbox";
|
14
|
+
var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
|
15
|
+
var [CheckboxProvider, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
|
16
|
+
var Checkbox = React.forwardRef(
|
17
|
+
(props, forwardedRef) => {
|
18
|
+
const {
|
19
|
+
__scopeCheckbox,
|
20
|
+
name,
|
21
|
+
checked: checkedProp,
|
22
|
+
defaultChecked,
|
23
|
+
required,
|
24
|
+
disabled,
|
25
|
+
value = "on",
|
26
|
+
onCheckedChange,
|
27
|
+
form,
|
28
|
+
...checkboxProps
|
29
|
+
} = props;
|
30
|
+
const [button, setButton] = React.useState(null);
|
31
|
+
const composedRefs = useComposedRefs(
|
32
|
+
forwardedRef,
|
33
|
+
(node) => setButton(node)
|
34
|
+
);
|
35
|
+
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
36
|
+
const isFormControl = button ? Boolean(button.closest("form")) : true;
|
37
|
+
const [checked = false, setChecked] = useControllableState({
|
38
|
+
prop: checkedProp,
|
39
|
+
defaultProp: defaultChecked,
|
40
|
+
onChange: onCheckedChange
|
41
|
+
});
|
42
|
+
const initialCheckedStateRef = React.useRef(checked);
|
43
|
+
React.useEffect(() => {
|
44
|
+
const form2 = button?.form;
|
45
|
+
if (form2) {
|
46
|
+
const reset = () => setChecked(initialCheckedStateRef.current);
|
47
|
+
form2.addEventListener("reset", reset);
|
48
|
+
return () => form2.removeEventListener("reset", reset);
|
49
|
+
}
|
50
|
+
}, [button, setChecked]);
|
51
|
+
return /* @__PURE__ */ jsxs(CheckboxProvider, { scope: __scopeCheckbox, state: checked, disabled, children: [
|
52
|
+
/* @__PURE__ */ jsx(
|
53
|
+
Primitive.button,
|
54
|
+
{
|
55
|
+
type: "button",
|
56
|
+
role: "checkbox",
|
57
|
+
"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
|
58
|
+
"aria-required": required,
|
59
|
+
"data-state": getState(checked),
|
60
|
+
"data-disabled": disabled ? "" : void 0,
|
61
|
+
disabled,
|
62
|
+
value,
|
63
|
+
...checkboxProps,
|
64
|
+
ref: composedRefs,
|
65
|
+
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
66
|
+
if (event.key === "Enter") event.preventDefault();
|
67
|
+
}),
|
68
|
+
onClick: composeEventHandlers(props.onClick, (event) => {
|
69
|
+
setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
|
70
|
+
if (isFormControl) {
|
71
|
+
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
72
|
+
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
|
73
|
+
}
|
74
|
+
})
|
75
|
+
}
|
76
|
+
),
|
77
|
+
isFormControl && /* @__PURE__ */ jsx(
|
78
|
+
BubbleInput,
|
79
|
+
{
|
80
|
+
control: button,
|
81
|
+
bubbles: !hasConsumerStoppedPropagationRef.current,
|
82
|
+
name,
|
83
|
+
value,
|
84
|
+
checked,
|
85
|
+
required,
|
86
|
+
disabled,
|
87
|
+
form,
|
88
|
+
style: { transform: "translateX(-100%)" },
|
89
|
+
defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked
|
90
|
+
}
|
91
|
+
)
|
92
|
+
] });
|
93
|
+
}
|
94
|
+
);
|
95
|
+
Checkbox.displayName = CHECKBOX_NAME;
|
96
|
+
var BubbleInput = (props) => {
|
97
|
+
const { control, checked, bubbles = true, ...inputProps } = props;
|
98
|
+
const ref = React.useRef(null);
|
99
|
+
const prevChecked = usePrevious(checked);
|
100
|
+
const controlSize = useSize(control);
|
101
|
+
React.useEffect(() => {
|
102
|
+
const input = ref.current;
|
103
|
+
const inputProto = window.HTMLInputElement.prototype;
|
104
|
+
const descriptor = Object.getOwnPropertyDescriptor(
|
105
|
+
inputProto,
|
106
|
+
"checked"
|
107
|
+
);
|
108
|
+
const setChecked = descriptor.set;
|
109
|
+
if (prevChecked !== checked && setChecked) {
|
110
|
+
const event = new Event("click", { bubbles });
|
111
|
+
input.indeterminate = isIndeterminate(checked);
|
112
|
+
setChecked.call(input, isIndeterminate(checked) ? false : checked);
|
113
|
+
input.dispatchEvent(event);
|
114
|
+
}
|
115
|
+
}, [prevChecked, checked, bubbles]);
|
116
|
+
return /* @__PURE__ */ jsx(
|
117
|
+
"input",
|
118
|
+
{
|
119
|
+
type: "checkbox",
|
120
|
+
"aria-hidden": true,
|
121
|
+
defaultChecked: isIndeterminate(checked) ? false : checked,
|
122
|
+
...inputProps,
|
123
|
+
tabIndex: -1,
|
124
|
+
ref,
|
125
|
+
style: {
|
126
|
+
...props.style,
|
127
|
+
...controlSize,
|
128
|
+
position: "absolute",
|
129
|
+
pointerEvents: "none",
|
130
|
+
opacity: 0,
|
131
|
+
margin: 0
|
132
|
+
}
|
133
|
+
}
|
134
|
+
);
|
135
|
+
};
|
136
|
+
function isIndeterminate(checked) {
|
137
|
+
return checked === "indeterminate";
|
138
|
+
}
|
139
|
+
function getState(checked) {
|
140
|
+
return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
|
141
|
+
}
|
142
|
+
var Root = Checkbox;
|
143
|
+
|
144
|
+
// packages/react/checkbox/src/CheckboxIndicator.tsx
|
145
|
+
import React2 from "react";
|
146
|
+
import { Presence } from "@huin-core/react-presence";
|
147
|
+
import { Primitive as Primitive2 } from "@huin-core/react-primitive";
|
148
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
149
|
+
var INDICATOR_NAME = "CheckboxIndicator";
|
150
|
+
var CheckboxIndicator = React2.forwardRef((props, forwardedRef) => {
|
151
|
+
const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
|
152
|
+
const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
|
153
|
+
return /* @__PURE__ */ jsx2(Presence, { present: forceMount || isIndeterminate(context.state) || context.state === true, children: /* @__PURE__ */ jsx2(
|
154
|
+
Primitive2.span,
|
155
|
+
{
|
156
|
+
"data-state": getState(context.state),
|
157
|
+
"data-disabled": context.disabled ? "" : void 0,
|
158
|
+
...indicatorProps,
|
159
|
+
ref: forwardedRef,
|
160
|
+
style: { pointerEvents: "none", ...props.style }
|
161
|
+
}
|
162
|
+
) });
|
163
|
+
});
|
164
|
+
CheckboxIndicator.displayName = INDICATOR_NAME;
|
165
|
+
export {
|
166
|
+
Checkbox,
|
167
|
+
CheckboxIndicator,
|
168
|
+
Root,
|
169
|
+
createCheckboxScope
|
170
|
+
};
|
171
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/Checkbox.tsx", "../src/CheckboxIndicator.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from \"react\";\nimport { usePrevious } from \"@huin-core/react-use-previous\";\nimport { useSize } from \"@huin-core/react-use-size\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\nimport { createContextScope, Scope } from \"@huin-core/react-context\";\nimport { useComposedRefs } from \"@huin-core/react-compose-refs\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_NAME = \"Checkbox\";\n\nexport type ScopedProps<P> = P & { __scopeCheckbox?: Scope };\nconst [createCheckboxContext, createCheckboxScope] =\n createContextScope(CHECKBOX_NAME);\n\ntype CheckedState = boolean | \"indeterminate\";\n\ntype CheckboxContextValue = {\n state: CheckedState;\n disabled?: boolean;\n};\n\nexport const [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\ntype CheckboxElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n typeof Primitive.button\n>;\ninterface CheckboxProps\n extends Omit<PrimitiveButtonProps, \"checked\" | \"defaultChecked\"> {\n checked?: CheckedState;\n defaultChecked?: CheckedState;\n required?: boolean;\n onCheckedChange?(checked: CheckedState): void;\n}\n\nconst Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(\n (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = \"on\",\n onCheckedChange,\n form,\n ...checkboxProps\n } = props;\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) =>\n setButton(node)\n );\n const hasConsumerStoppedPropagationRef = React.useRef(false);\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = button ? Boolean(button.closest(\"form\")) : true;\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked,\n onChange: onCheckedChange,\n });\n const initialCheckedStateRef = React.useRef(checked);\n React.useEffect(() => {\n const form = button?.form;\n if (form) {\n const reset = () => setChecked(initialCheckedStateRef.current);\n form.addEventListener(\"reset\", reset);\n return () => form.removeEventListener(\"reset\", reset);\n }\n }, [button, setChecked]);\n\n return (\n <CheckboxProvider scope={__scopeCheckbox} state={checked} disabled={disabled}>\n <Primitive.button\n type=\"button\"\n role=\"checkbox\"\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n value={value}\n {...checkboxProps}\n ref={composedRefs}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault();\n })}\n onClick={composeEventHandlers(props.onClick, (event) => {\n setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n // if checkbox is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n }\n })}\n />\n {isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n form={form}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n defaultChecked={isIndeterminate(defaultChecked) ? false : defaultChecked}\n />\n )}\n </CheckboxProvider>\n );\n }\n);\n\nCheckbox.displayName = CHECKBOX_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = React.ComponentPropsWithoutRef<\"input\">;\ninterface BubbleInputProps extends Omit<InputProps, \"checked\"> {\n checked: CheckedState;\n control: HTMLElement | null;\n bubbles: boolean;\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props;\n const ref = React.useRef<HTMLInputElement>(null);\n const prevChecked = usePrevious(checked);\n const controlSize = useSize(control);\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!;\n const inputProto = window.HTMLInputElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n \"checked\"\n ) as PropertyDescriptor;\n const setChecked = descriptor.set;\n\n if (prevChecked !== checked && setChecked) {\n const event = new Event(\"click\", { bubbles });\n input.indeterminate = isIndeterminate(checked);\n setChecked.call(input, isIndeterminate(checked) ? false : checked);\n input.dispatchEvent(event);\n }\n }, [prevChecked, checked, bubbles]);\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={isIndeterminate(checked) ? false : checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n ...controlSize,\n position: \"absolute\",\n pointerEvents: \"none\",\n opacity: 0,\n margin: 0,\n }}\n />\n );\n};\n\nexport function isIndeterminate(\n checked?: CheckedState\n): checked is \"indeterminate\" {\n return checked === \"indeterminate\";\n}\n\nexport function getState(checked: CheckedState) {\n return isIndeterminate(checked)\n ? \"indeterminate\"\n : checked\n ? \"checked\"\n : \"unchecked\";\n}\n\nconst Root = Checkbox;\n\nexport {\n createCheckboxScope,\n //\n Checkbox,\n //\n Root,\n};\nexport type { CheckboxProps, CheckedState };\n", "import React from \"react\";\nimport { Presence } from \"@huin-core/react-presence\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport {\n getState,\n isIndeterminate,\n ScopedProps,\n useCheckboxContext,\n} from \"./Checkbox\";\n\nconst INDICATOR_NAME = \"CheckboxIndicator\";\n\ntype CheckboxIndicatorElement = React.ElementRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface CheckboxIndicatorProps extends PrimitiveSpanProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst CheckboxIndicator = React.forwardRef<\n CheckboxIndicatorElement,\n CheckboxIndicatorProps\n>((props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const { __scopeCheckbox, forceMount, ...indicatorProps } = props;\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);\n return (\n <Presence present={forceMount || isIndeterminate(context.state) || context.state === true}>\n <Primitive.span\n data-state={getState(context.state)}\n data-disabled={context.disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n style={{ pointerEvents: 'none', ...props.style }}\n />\n </Presence>\n );\n});\n\nCheckboxIndicator.displayName = INDICATOR_NAME;\n\nexport { CheckboxIndicator };\nexport type {CheckboxIndicatorProps}\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": ["form", "React", "Primitive", "jsx", "React", "Primitive"]
|
7
|
+
}
|