@bento/checkbox 0.2.0 → 0.2.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/dist/index.cjs +2 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/package.json +7 -6
- package/src/checkbox.tsx +2 -1
package/dist/index.cjs
CHANGED
|
@@ -4,6 +4,7 @@ var React2 = require('react');
|
|
|
4
4
|
var container = require('@bento/container');
|
|
5
5
|
var useDataAttributes = require('@bento/use-data-attributes');
|
|
6
6
|
var icon = require('@bento/icon');
|
|
7
|
+
var input = require('@bento/input');
|
|
7
8
|
var slots = require('@bento/slots');
|
|
8
9
|
var useProps = require('@bento/use-props');
|
|
9
10
|
var visuallyHidden = require('@bento/visually-hidden');
|
|
@@ -59,7 +60,7 @@ var Checkbox = slots.withSlots("BentoCheckbox", function Checkbox2(args) {
|
|
|
59
60
|
indeterminate: props.isIndeterminate
|
|
60
61
|
})
|
|
61
62
|
},
|
|
62
|
-
/* @__PURE__ */ React2__default.default.createElement(visuallyHidden.VisuallyHidden, null, /* @__PURE__ */ React2__default.default.createElement(
|
|
63
|
+
/* @__PURE__ */ React2__default.default.createElement(visuallyHidden.VisuallyHidden, null, /* @__PURE__ */ React2__default.default.createElement(input.Input, { ...utils.mergeProps(inputProps, focusProps), ref: inputRef })),
|
|
63
64
|
props.isIndeterminate ? /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-indeterminate", icon: "checkboxIndeterminate" }, /* @__PURE__ */ React2__default.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2__default.default.createElement("rect", { x: "6", y: "11", width: "12", height: "2", fill: "currentColor" }))) : isSelected ? /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-checked", icon: "checkboxChecked" }, /* @__PURE__ */ React2__default.default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2__default.default.createElement("path", { d: "M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z", fill: "currentColor" }))) : /* @__PURE__ */ React2__default.default.createElement(icon.Icon, { slot: "icon-unchecked", icon: "checkboxUnchecked" }, /* @__PURE__ */ React2__default.default.createElement("svg", { width: 24, height: 24 }, /* @__PURE__ */ React2__default.default.createElement("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3, fill: "none", stroke: "gray", strokeWidth: 2 }))),
|
|
64
65
|
props.children
|
|
65
66
|
);
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"names":["React","withSlots","Checkbox","useProps","useContext","useRef","useObjectRef","useMemo","mergeRefs","useFocusRing","useCheckboxGroupItem","useCheckbox","useToggleState","useHover","Container","mergeProps","useDataAttributes","VisuallyHidden","Icon","CheckboxGroup","useCheckboxGroupState","useCheckboxGroup"],"mappings":"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","file":"index.cjs","sourcesContent":["import React from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupStateContext = React.createContext<CheckboxGroupState | null>(null);\n","import React, { useContext, useRef, useMemo } from 'react';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { Icon } from '@bento/icon';\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, useCheckbox, useCheckboxGroupItem, type AriaCheckboxProps } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxProps extends AriaCheckboxProps, Omit<ContainerProps, keyof AriaCheckboxProps> {\n /** The value of the checkbox, used when submitting an HTML form. */\n value?: string;\n\n /** The name of the checkbox. */\n name?: string;\n\n /** A ref for the HTML input element. */\n inputRef?: React.Ref<HTMLInputElement>;\n\n /** The label for the checkbox. Accepts any renderable node. */\n children?: React.ReactNode;\n\n /** Whether the checkbox is required or not. */\n isRequired?: boolean;\n\n /** Whether the input can be selected but not changed by the user. */\n isReadOnly?: boolean;\n\n /**\n * Whether the checkbox 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 /** Whether the checkbox is in an indeterminate state. */\n isIndeterminate?: boolean;\n\n /** Whether the checkbox is in a selected state. */\n isSelected?: boolean;\n}\n\n/**\n * The `Checkbox` is a single checkbox option that can be selected by the user.\n */\nexport const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {\n const { props, apply } = useProps(args);\n const groupState = useContext(CheckboxGroupStateContext);\n const ref = useRef<HTMLInputElement>(null);\n const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n\n const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState\n ? useCheckboxGroupItem(\n {\n ...props,\n // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).\n value: (props as Required<Pick<typeof props, 'value'>>).value\n },\n groupState,\n inputRef\n )\n : useCheckbox(props, useToggleState(props), inputRef);\n\n const interactionDisabled = props.isDisabled || isDisabled || isReadOnly;\n const { hoverProps, isHovered } = useHover({\n ...props,\n isDisabled: interactionDisabled\n });\n\n return (\n <Container\n as=\"label\"\n aria-checked={props.isIndeterminate ? 'mixed' : undefined}\n {...apply(mergeProps(labelProps, hoverProps))}\n {...useDataAttributes({\n selected: isSelected,\n pressed: isPressed,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: interactionDisabled,\n readonly: isReadOnly,\n invalid: isInvalid,\n required: props.isRequired,\n indeterminate: props.isIndeterminate\n })}\n >\n <VisuallyHidden>\n <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n </VisuallyHidden>\n\n {props.isIndeterminate ? (\n <Icon slot=\"icon-indeterminate\" icon=\"checkboxIndeterminate\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"6\" y=\"11\" width=\"12\" height=\"2\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : isSelected ? (\n <Icon slot=\"icon-checked\" icon=\"checkboxChecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : (\n <Icon slot=\"icon-unchecked\" icon=\"checkboxUnchecked\">\n <svg width={24} height={24}>\n <rect x={4} y={4} width={16} height={16} rx={3} 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 { useCheckboxGroup, mergeProps, type AriaCheckboxGroupProps } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\n\nexport interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps, keyof AriaCheckboxGroupProps> {\n /** The current value of the checkbox group (controlled). */\n value?: string[];\n\n /** The default value of the checkbox group (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 /** Checkbox children. */\n children?: React.ReactNode;\n}\n\n/**\n * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.\n */\nexport const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {\n const { props, apply } = useProps(args);\n const state = useCheckboxGroupState(props);\n const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(\n { ...props, label: props.label ?? 'Checkbox Group', description: props.description ?? 'Description' },\n state\n );\n\n return (\n <CheckboxGroupStateContext.Provider value={state}>\n <Container\n {...apply(groupProps)}\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 </CheckboxGroupStateContext.Provider>\n );\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"names":["React","withSlots","Checkbox","useProps","useContext","useRef","useObjectRef","useMemo","mergeRefs","useFocusRing","useCheckboxGroupItem","useCheckbox","useToggleState","useHover","Container","mergeProps","useDataAttributes","VisuallyHidden","Input","Icon","CheckboxGroup","useCheckboxGroupState","useCheckboxGroup"],"mappings":"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","file":"index.cjs","sourcesContent":["import React from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupStateContext = React.createContext<CheckboxGroupState | null>(null);\n","import React, { useContext, useRef, 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, useCheckbox, useCheckboxGroupItem, type AriaCheckboxProps } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxProps extends AriaCheckboxProps, Omit<ContainerProps, keyof AriaCheckboxProps> {\n /** The value of the checkbox, used when submitting an HTML form. */\n value?: string;\n\n /** The name of the checkbox. */\n name?: string;\n\n /** A ref for the HTML input element. */\n inputRef?: React.Ref<HTMLInputElement>;\n\n /** The label for the checkbox. Accepts any renderable node. */\n children?: React.ReactNode;\n\n /** Whether the checkbox is required or not. */\n isRequired?: boolean;\n\n /** Whether the input can be selected but not changed by the user. */\n isReadOnly?: boolean;\n\n /**\n * Whether the checkbox 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 /** Whether the checkbox is in an indeterminate state. */\n isIndeterminate?: boolean;\n\n /** Whether the checkbox is in a selected state. */\n isSelected?: boolean;\n}\n\n/**\n * The `Checkbox` is a single checkbox option that can be selected by the user.\n */\nexport const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {\n const { props, apply } = useProps(args);\n const groupState = useContext(CheckboxGroupStateContext);\n const ref = useRef<HTMLInputElement>(null);\n const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n\n const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState\n ? useCheckboxGroupItem(\n {\n ...props,\n // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).\n value: (props as Required<Pick<typeof props, 'value'>>).value\n },\n groupState,\n inputRef\n )\n : useCheckbox(props, useToggleState(props), inputRef);\n\n const interactionDisabled = props.isDisabled || isDisabled || isReadOnly;\n const { hoverProps, isHovered } = useHover({\n ...props,\n isDisabled: interactionDisabled\n });\n\n return (\n <Container\n as=\"label\"\n aria-checked={props.isIndeterminate ? 'mixed' : undefined}\n {...apply(mergeProps(labelProps, hoverProps))}\n {...useDataAttributes({\n selected: isSelected,\n pressed: isPressed,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: interactionDisabled,\n readonly: isReadOnly,\n invalid: isInvalid,\n required: props.isRequired,\n indeterminate: props.isIndeterminate\n })}\n >\n <VisuallyHidden>\n <Input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n </VisuallyHidden>\n\n {props.isIndeterminate ? (\n <Icon slot=\"icon-indeterminate\" icon=\"checkboxIndeterminate\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"6\" y=\"11\" width=\"12\" height=\"2\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : isSelected ? (\n <Icon slot=\"icon-checked\" icon=\"checkboxChecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : (\n <Icon slot=\"icon-unchecked\" icon=\"checkboxUnchecked\">\n <svg width={24} height={24}>\n <rect x={4} y={4} width={16} height={16} rx={3} 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 { useCheckboxGroup, mergeProps, type AriaCheckboxGroupProps } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\n\nexport interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps, keyof AriaCheckboxGroupProps> {\n /** The current value of the checkbox group (controlled). */\n value?: string[];\n\n /** The default value of the checkbox group (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 /** Checkbox children. */\n children?: React.ReactNode;\n}\n\n/**\n * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.\n */\nexport const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {\n const { props, apply } = useProps(args);\n const state = useCheckboxGroupState(props);\n const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(\n { ...props, label: props.label ?? 'Checkbox Group', description: props.description ?? 'Description' },\n state\n );\n\n return (\n <CheckboxGroupStateContext.Provider value={state}>\n <Container\n {...apply(groupProps)}\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 </CheckboxGroupStateContext.Provider>\n );\n});\n"]}
|
package/dist/index.js
CHANGED
|
@@ -2,6 +2,7 @@ import React2, { useContext, useRef, useMemo } from 'react';
|
|
|
2
2
|
import { Container } from '@bento/container';
|
|
3
3
|
import { useDataAttributes } from '@bento/use-data-attributes';
|
|
4
4
|
import { Icon } from '@bento/icon';
|
|
5
|
+
import { Input } from '@bento/input';
|
|
5
6
|
import { withSlots } from '@bento/slots';
|
|
6
7
|
import { useProps } from '@bento/use-props';
|
|
7
8
|
import { VisuallyHidden } from '@bento/visually-hidden';
|
|
@@ -53,7 +54,7 @@ var Checkbox = withSlots("BentoCheckbox", function Checkbox2(args) {
|
|
|
53
54
|
indeterminate: props.isIndeterminate
|
|
54
55
|
})
|
|
55
56
|
},
|
|
56
|
-
/* @__PURE__ */ React2.createElement(VisuallyHidden, null, /* @__PURE__ */ React2.createElement(
|
|
57
|
+
/* @__PURE__ */ React2.createElement(VisuallyHidden, null, /* @__PURE__ */ React2.createElement(Input, { ...mergeProps(inputProps, focusProps), ref: inputRef })),
|
|
57
58
|
props.isIndeterminate ? /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-indeterminate", icon: "checkboxIndeterminate" }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("rect", { x: "6", y: "11", width: "12", height: "2", fill: "currentColor" }))) : isSelected ? /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-checked", icon: "checkboxChecked" }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("path", { d: "M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z", fill: "currentColor" }))) : /* @__PURE__ */ React2.createElement(Icon, { slot: "icon-unchecked", icon: "checkboxUnchecked" }, /* @__PURE__ */ React2.createElement("svg", { width: 24, height: 24 }, /* @__PURE__ */ React2.createElement("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3, fill: "none", stroke: "gray", strokeWidth: 2 }))),
|
|
58
59
|
props.children
|
|
59
60
|
);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"names":["React","Checkbox","withSlots","CheckboxGroup","useProps","Container","useDataAttributes","mergeProps"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupStateContext = React.createContext<CheckboxGroupState | null>(null);\n","import React, { useContext, useRef, useMemo } from 'react';\nimport { Container, type ContainerProps } from '@bento/container';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { Icon } from '@bento/icon';\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, useCheckbox, useCheckboxGroupItem, type AriaCheckboxProps } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxProps extends AriaCheckboxProps, Omit<ContainerProps, keyof AriaCheckboxProps> {\n /** The value of the checkbox, used when submitting an HTML form. */\n value?: string;\n\n /** The name of the checkbox. */\n name?: string;\n\n /** A ref for the HTML input element. */\n inputRef?: React.Ref<HTMLInputElement>;\n\n /** The label for the checkbox. Accepts any renderable node. */\n children?: React.ReactNode;\n\n /** Whether the checkbox is required or not. */\n isRequired?: boolean;\n\n /** Whether the input can be selected but not changed by the user. */\n isReadOnly?: boolean;\n\n /**\n * Whether the checkbox 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 /** Whether the checkbox is in an indeterminate state. */\n isIndeterminate?: boolean;\n\n /** Whether the checkbox is in a selected state. */\n isSelected?: boolean;\n}\n\n/**\n * The `Checkbox` is a single checkbox option that can be selected by the user.\n */\nexport const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {\n const { props, apply } = useProps(args);\n const groupState = useContext(CheckboxGroupStateContext);\n const ref = useRef<HTMLInputElement>(null);\n const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n\n const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState\n ? useCheckboxGroupItem(\n {\n ...props,\n // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).\n value: (props as Required<Pick<typeof props, 'value'>>).value\n },\n groupState,\n inputRef\n )\n : useCheckbox(props, useToggleState(props), inputRef);\n\n const interactionDisabled = props.isDisabled || isDisabled || isReadOnly;\n const { hoverProps, isHovered } = useHover({\n ...props,\n isDisabled: interactionDisabled\n });\n\n return (\n <Container\n as=\"label\"\n aria-checked={props.isIndeterminate ? 'mixed' : undefined}\n {...apply(mergeProps(labelProps, hoverProps))}\n {...useDataAttributes({\n selected: isSelected,\n pressed: isPressed,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: interactionDisabled,\n readonly: isReadOnly,\n invalid: isInvalid,\n required: props.isRequired,\n indeterminate: props.isIndeterminate\n })}\n >\n <VisuallyHidden>\n <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n </VisuallyHidden>\n\n {props.isIndeterminate ? (\n <Icon slot=\"icon-indeterminate\" icon=\"checkboxIndeterminate\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"6\" y=\"11\" width=\"12\" height=\"2\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : isSelected ? (\n <Icon slot=\"icon-checked\" icon=\"checkboxChecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : (\n <Icon slot=\"icon-unchecked\" icon=\"checkboxUnchecked\">\n <svg width={24} height={24}>\n <rect x={4} y={4} width={16} height={16} rx={3} 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 { useCheckboxGroup, mergeProps, type AriaCheckboxGroupProps } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\n\nexport interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps, keyof AriaCheckboxGroupProps> {\n /** The current value of the checkbox group (controlled). */\n value?: string[];\n\n /** The default value of the checkbox group (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 /** Checkbox children. */\n children?: React.ReactNode;\n}\n\n/**\n * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.\n */\nexport const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {\n const { props, apply } = useProps(args);\n const state = useCheckboxGroupState(props);\n const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(\n { ...props, label: props.label ?? 'Checkbox Group', description: props.description ?? 'Description' },\n state\n );\n\n return (\n <CheckboxGroupStateContext.Provider value={state}>\n <Container\n {...apply(groupProps)}\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 </CheckboxGroupStateContext.Provider>\n );\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/checkbox-group-state.tsx","../src/checkbox.tsx","../src/checkbox-group.tsx"],"names":["React","Checkbox","withSlots","CheckboxGroup","useProps","Container","useDataAttributes","mergeProps"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { CheckboxGroupState } from 'react-stately';\n\nexport const CheckboxGroupStateContext = React.createContext<CheckboxGroupState | null>(null);\n","import React, { useContext, useRef, 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, useCheckbox, useCheckboxGroupItem, type AriaCheckboxProps } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\n\nexport interface CheckboxProps extends AriaCheckboxProps, Omit<ContainerProps, keyof AriaCheckboxProps> {\n /** The value of the checkbox, used when submitting an HTML form. */\n value?: string;\n\n /** The name of the checkbox. */\n name?: string;\n\n /** A ref for the HTML input element. */\n inputRef?: React.Ref<HTMLInputElement>;\n\n /** The label for the checkbox. Accepts any renderable node. */\n children?: React.ReactNode;\n\n /** Whether the checkbox is required or not. */\n isRequired?: boolean;\n\n /** Whether the input can be selected but not changed by the user. */\n isReadOnly?: boolean;\n\n /**\n * Whether the checkbox 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 /** Whether the checkbox is in an indeterminate state. */\n isIndeterminate?: boolean;\n\n /** Whether the checkbox is in a selected state. */\n isSelected?: boolean;\n}\n\n/**\n * The `Checkbox` is a single checkbox option that can be selected by the user.\n */\nexport const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: CheckboxProps) {\n const { props, apply } = useProps(args);\n const groupState = useContext(CheckboxGroupStateContext);\n const ref = useRef<HTMLInputElement>(null);\n const inputRef = useObjectRef(useMemo(() => mergeRefs(ref, props.inputRef), [ref, props.inputRef]));\n const { isFocused, isFocusVisible, focusProps } = useFocusRing();\n\n const { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid } = groupState\n ? useCheckboxGroupItem(\n {\n ...props,\n // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n // it's passed explicitly here to avoid typescript error (requires ignore)(recommendation from React Aria).\n value: (props as Required<Pick<typeof props, 'value'>>).value\n },\n groupState,\n inputRef\n )\n : useCheckbox(props, useToggleState(props), inputRef);\n\n const interactionDisabled = props.isDisabled || isDisabled || isReadOnly;\n const { hoverProps, isHovered } = useHover({\n ...props,\n isDisabled: interactionDisabled\n });\n\n return (\n <Container\n as=\"label\"\n aria-checked={props.isIndeterminate ? 'mixed' : undefined}\n {...apply(mergeProps(labelProps, hoverProps))}\n {...useDataAttributes({\n selected: isSelected,\n pressed: isPressed,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: interactionDisabled,\n readonly: isReadOnly,\n invalid: isInvalid,\n required: props.isRequired,\n indeterminate: props.isIndeterminate\n })}\n >\n <VisuallyHidden>\n <Input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n </VisuallyHidden>\n\n {props.isIndeterminate ? (\n <Icon slot=\"icon-indeterminate\" icon=\"checkboxIndeterminate\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"6\" y=\"11\" width=\"12\" height=\"2\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : isSelected ? (\n <Icon slot=\"icon-checked\" icon=\"checkboxChecked\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9,16.2L4.8,12l-1.4,1.4L9,19L21,7l-1.4-1.4L9,16.2z\" fill=\"currentColor\" />\n </svg>\n </Icon>\n ) : (\n <Icon slot=\"icon-unchecked\" icon=\"checkboxUnchecked\">\n <svg width={24} height={24}>\n <rect x={4} y={4} width={16} height={16} rx={3} 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 { useCheckboxGroup, mergeProps, type AriaCheckboxGroupProps } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\nimport { CheckboxGroupStateContext } from './checkbox-group-state';\nimport { useDataAttributes } from '@bento/use-data-attributes';\n\nexport interface CheckboxGroupProps extends AriaCheckboxGroupProps, Omit<ContainerProps, keyof AriaCheckboxGroupProps> {\n /** The current value of the checkbox group (controlled). */\n value?: string[];\n\n /** The default value of the checkbox group (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 /** Checkbox children. */\n children?: React.ReactNode;\n}\n\n/**\n * The `CheckboxGroup` allows a user to select items from a list of `Checkbox` components.\n */\nexport const CheckboxGroup = withSlots('BentoCheckboxGroup', function CheckboxGroup(args: CheckboxGroupProps) {\n const { props, apply } = useProps(args);\n const state = useCheckboxGroupState(props);\n const { groupProps, labelProps, descriptionProps, errorMessageProps, ...validationResult } = useCheckboxGroup(\n { ...props, label: props.label ?? 'Checkbox Group', description: props.description ?? 'Description' },\n state\n );\n\n return (\n <CheckboxGroupStateContext.Provider value={state}>\n <Container\n {...apply(groupProps)}\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 </CheckboxGroupStateContext.Provider>\n );\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bento/checkbox",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Checkbox component",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -40,12 +40,13 @@
|
|
|
40
40
|
"package.json"
|
|
41
41
|
],
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@bento/container": "^0.2.
|
|
44
|
-
"@bento/icon": "^0.1.
|
|
45
|
-
"@bento/
|
|
43
|
+
"@bento/container": "^0.2.1",
|
|
44
|
+
"@bento/icon": "^0.1.4",
|
|
45
|
+
"@bento/input": "^0.1.0",
|
|
46
|
+
"@bento/slots": "^0.3.0",
|
|
46
47
|
"@bento/use-data-attributes": "^0.1.1",
|
|
47
|
-
"@bento/use-props": "^0.2.
|
|
48
|
-
"@bento/visually-hidden": "^0.1.
|
|
48
|
+
"@bento/use-props": "^0.2.1",
|
|
49
|
+
"@bento/visually-hidden": "^0.1.1",
|
|
49
50
|
"@react-aria/utils": "^3.30.0",
|
|
50
51
|
"react-aria": "^3.44.0",
|
|
51
52
|
"react-stately": "^3.42.0"
|
package/src/checkbox.tsx
CHANGED
|
@@ -2,6 +2,7 @@ import React, { useContext, useRef, useMemo } from 'react';
|
|
|
2
2
|
import { Container, type ContainerProps } from '@bento/container';
|
|
3
3
|
import { useDataAttributes } from '@bento/use-data-attributes';
|
|
4
4
|
import { Icon } from '@bento/icon';
|
|
5
|
+
import { Input } from '@bento/input';
|
|
5
6
|
import { withSlots } from '@bento/slots';
|
|
6
7
|
import { useProps } from '@bento/use-props';
|
|
7
8
|
import { VisuallyHidden } from '@bento/visually-hidden';
|
|
@@ -93,7 +94,7 @@ export const Checkbox = withSlots('BentoCheckbox', function Checkbox(args: Check
|
|
|
93
94
|
})}
|
|
94
95
|
>
|
|
95
96
|
<VisuallyHidden>
|
|
96
|
-
<
|
|
97
|
+
<Input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
|
|
97
98
|
</VisuallyHidden>
|
|
98
99
|
|
|
99
100
|
{props.isIndeterminate ? (
|