@channel.io/bezier-react 3.2.0 → 3.3.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/cjs/components/Checkbox/Checkbox.js +6 -3
- package/dist/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/Checkbox/Checkbox.module.scss.js +1 -1
- package/dist/cjs/styles.css +1 -1
- package/dist/esm/components/Checkbox/Checkbox.mjs +6 -3
- package/dist/esm/components/Checkbox/Checkbox.mjs.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.module.scss.mjs +1 -1
- package/dist/esm/styles.css +1 -1
- package/dist/types/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/types/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/types/components/Checkbox/Checkbox.types.d.ts +3 -2
- package/dist/types/components/Checkbox/Checkbox.types.d.ts.map +1 -1
- package/dist/types/components/Checkbox/index.d.ts +1 -1
- package/dist/types/components/Checkbox/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/components/Checkbox/Checkbox.module.scss +11 -2
- package/src/components/Checkbox/Checkbox.tsx +4 -4
- package/src/components/Checkbox/Checkbox.types.ts +4 -0
- package/src/components/Checkbox/index.ts +5 -1
|
@@ -23,7 +23,6 @@ const CheckIcon = /*#__PURE__*/React.forwardRef(function CheckIcon(props, forwar
|
|
|
23
23
|
className: Checkbox_module.default.CheckIcon,
|
|
24
24
|
ref: forwardedRef,
|
|
25
25
|
source: !isIndeterminate ? bezierIcons.CheckBoldIcon : bezierIcons.HyphenBoldIcon,
|
|
26
|
-
size: "xs",
|
|
27
26
|
color: isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark',
|
|
28
27
|
...props
|
|
29
28
|
});
|
|
@@ -32,6 +31,7 @@ function CheckboxImpl({
|
|
|
32
31
|
children,
|
|
33
32
|
className,
|
|
34
33
|
checked,
|
|
34
|
+
size = 'm',
|
|
35
35
|
id: idProp,
|
|
36
36
|
...rest
|
|
37
37
|
}, forwardedRef) {
|
|
@@ -41,11 +41,12 @@ function CheckboxImpl({
|
|
|
41
41
|
...formFieldProps
|
|
42
42
|
} = FormControl.useFormFieldProps(rest);
|
|
43
43
|
const id = useId.default(idProp !== null && idProp !== void 0 ? idProp : formFieldId, 'bezier-checkbox');
|
|
44
|
+
const iconSize = size === 's' ? 'xxs' : 'xs';
|
|
44
45
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
45
46
|
className: index.default(Checkbox_module.default.Container, propsHelpers.getFormFieldSizeClassName('m')),
|
|
46
47
|
children: [/*#__PURE__*/jsxRuntime.jsx(index$1.Root, {
|
|
47
48
|
asChild: true,
|
|
48
|
-
className: index.default(Checkbox_module.default.Checkbox, className),
|
|
49
|
+
className: index.default(Checkbox_module.default.Checkbox, Checkbox_module.default[`size-${size}`], className),
|
|
49
50
|
ref: forwardedRef,
|
|
50
51
|
id: id,
|
|
51
52
|
checked: checked,
|
|
@@ -56,7 +57,9 @@ function CheckboxImpl({
|
|
|
56
57
|
asChild: true
|
|
57
58
|
/* NOTE: To allow the icon to be rendered even if unchecked. */,
|
|
58
59
|
forceMount: true,
|
|
59
|
-
children: /*#__PURE__*/jsxRuntime.jsx(CheckIcon, {
|
|
60
|
+
children: /*#__PURE__*/jsxRuntime.jsx(CheckIcon, {
|
|
61
|
+
size: iconSize
|
|
62
|
+
})
|
|
60
63
|
})
|
|
61
64
|
})
|
|
62
65
|
}), children && /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport { CheckBoldIcon, HyphenBoldIcon } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type CheckboxProps, type CheckedState } from './Checkbox.types'\n\nimport styles from './Checkbox.module.scss'\n\ninterface CheckIconProps {\n style: React.CSSProperties\n 'data-state': 'checked' | 'unchecked' | 'indeterminate'\n 'data-disabled': boolean | undefined\n}\n\n/* NOTE: Props are injected at runtime by `CheckboxPrimitive.Indicator`. */\nconst CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(\n function CheckIcon(props, forwardedRef) {\n // eslint-disable-next-line react/destructuring-assignment\n const state = props['data-state']\n const isUnchecked = state === 'unchecked'\n const isIndeterminate = state === 'indeterminate'\n\n return (\n <Icon\n className={styles.CheckIcon}\n ref={forwardedRef}\n source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}\n
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport { CheckBoldIcon, HyphenBoldIcon } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type CheckboxProps, type CheckedState } from './Checkbox.types'\n\nimport styles from './Checkbox.module.scss'\n\ninterface CheckIconProps {\n style: React.CSSProperties\n 'data-state': 'checked' | 'unchecked' | 'indeterminate'\n 'data-disabled': boolean | undefined\n}\n\n/* NOTE: Props are injected at runtime by `CheckboxPrimitive.Indicator`. */\nconst CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(\n function CheckIcon(props, forwardedRef) {\n // eslint-disable-next-line react/destructuring-assignment\n const state = props['data-state']\n const isUnchecked = state === 'unchecked'\n const isIndeterminate = state === 'indeterminate'\n\n return (\n <Icon\n className={styles.CheckIcon}\n ref={forwardedRef}\n source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}\n color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}\n {...props}\n />\n )\n }\n)\n\nfunction CheckboxImpl<Checked extends CheckedState>(\n { children, className, checked, size = 'm', id: idProp, ...rest }: CheckboxProps<Checked>,\n forwardedRef: React.Ref<HTMLButtonElement>\n) {\n const {\n id: formFieldId,\n hasError,\n ...formFieldProps\n } = useFormFieldProps(rest)\n\n const id = useId(idProp ?? formFieldId, 'bezier-checkbox')\n const iconSize = size === 's' ? 'xxs' : 'xs'\n\n return (\n <div\n className={classNames(styles.Container, getFormFieldSizeClassName('m'))}\n >\n <CheckboxPrimitive.Root\n asChild\n className={classNames(styles.Checkbox, styles[`size-${size}`], className)}\n ref={forwardedRef}\n id={id}\n checked={checked}\n data-invalid={formFieldProps['aria-invalid']}\n {...formFieldProps}\n >\n <BaseButton>\n <CheckboxPrimitive.Indicator\n asChild\n /* NOTE: To allow the icon to be rendered even if unchecked. */\n forceMount\n >\n {/* @ts-expect-error */}\n <CheckIcon size={iconSize} />\n </CheckboxPrimitive.Indicator>\n </BaseButton>\n </CheckboxPrimitive.Root>\n {children && (\n <Text\n as=\"label\"\n // TODO: Apply polymorphic types to `as` prop.\n // @ts-expect-error\n htmlFor={id}\n className={styles.Label}\n typo=\"14\"\n color=\"txt-black-darkest\"\n >\n {children}\n </Text>\n )}\n </div>\n )\n}\n\n/* NOTE: This is a workaround to avoid infinite type recursion when directly using `ReturnType` */\ntype ReturnTypeOfCheckboxImpl<Checked extends CheckedState> = ReturnType<\n typeof CheckboxImpl<Checked>\n>\n\n/**\n * `Checkbox` is a control that allows the user to toggle between checked and not checked.\n * It can be used with labels or standalone.\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled / With label\n * <Checkbox\n * checked={checked}\n * onCheckedChange={setChecked}\n * >\n * Label\n * </Checkbox>\n * // Controlled / Standalone\n * <Checkbox\n * checked={checked}\n * onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <Checkbox\n * defaultChecked={true}\n * >\n * Label\n * </Checkbox>\n * ```\n */\nexport const Checkbox = forwardRef(CheckboxImpl) as <\n Checked extends CheckedState,\n>(\n props: CheckboxProps<Checked> & {\n ref?: React.ForwardedRef<HTMLButtonElement>\n }\n) => ReturnTypeOfCheckboxImpl<Checked>\n"],"names":["CheckIcon","forwardRef","props","forwardedRef","state","isUnchecked","isIndeterminate","_jsx","Icon","className","styles","ref","source","CheckBoldIcon","HyphenBoldIcon","color","CheckboxImpl","children","checked","size","id","idProp","rest","formFieldId","hasError","formFieldProps","useFormFieldProps","useId","iconSize","_jsxs","classNames","Container","getFormFieldSizeClassName","CheckboxPrimitive","asChild","Checkbox","BaseButton","forceMount","Text","as","htmlFor","Label","typo"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"CheckIcon":"b-MJZuf","Checkbox":"b-t-gE3","Container":"b-TKPSV","Label":"b-obxaB"};
|
|
5
|
+
var styles = {"CheckIcon":"b-MJZuf","Checkbox":"b-t-gE3","size-s":"b--VPIJ","size-m":"b-Ro4Oe","Container":"b-TKPSV","Label":"b-obxaB"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=Checkbox.module.scss.js.map
|