@channel.io/bezier-react 3.2.0 → 3.3.0

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type CheckboxProps, type CheckedState } from './Checkbox.types';
-declare function CheckboxImpl<Checked extends CheckedState>({ children, className, checked, id: idProp, ...rest }: CheckboxProps<Checked>, forwardedRef: React.Ref<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxImpl<Checked extends CheckedState>({ children, className, checked, size, id: idProp, ...rest }: CheckboxProps<Checked>, forwardedRef: React.Ref<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
 type ReturnTypeOfCheckboxImpl<Checked extends CheckedState> = ReturnType<typeof CheckboxImpl<Checked>>;
 /**
  * `Checkbox` is a control that allows the user to toggle between checked and not checked.

package/dist/types/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AA+BxE,iBAAS,YAAY,CAAC,OAAO,SAAS,YAAY,EAChD,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,CAAC,OAAO,CAAC,EAC7E,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,2CAiD3C;AAGD,KAAK,wBAAwB,CAAC,OAAO,SAAS,YAAY,IAAI,UAAU,CACtE,OAAO,YAAY,CAAC,OAAO,CAAC,CAC7B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,EAA+B,CAClD,OAAO,SAAS,YAAY,EAE5B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAC5C,KACE,wBAAwB,CAAC,OAAO,CAAC,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AA8BxE,iBAAS,YAAY,CAAC,OAAO,SAAS,YAAY,EAChD,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,IAAU,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,CAAC,OAAO,CAAC,EACzF,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,2CAkD3C;AAGD,KAAK,wBAAwB,CAAC,OAAO,SAAS,YAAY,IAAI,UAAU,CACtE,OAAO,YAAY,CAAC,OAAO,CAAC,CAC7B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,EAA+B,CAClD,OAAO,SAAS,YAAY,EAE5B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAC5C,KACE,wBAAwB,CAAC,OAAO,CAAC,CAAA"}

package/dist/types/components/Checkbox/Checkbox.types.d.ts

@@ -1,5 +1,6 @@
-import { type BezierComponentProps, type ChildrenProps, type FormFieldProps } from "../../types/props";
+import { type BezierComponentProps, type ChildrenProps, type FormFieldProps, type SizeProps } from "../../types/props";
 export type CheckedState = boolean | 'indeterminate';
+export type CheckboxSize = 's' | 'm';
 interface CheckboxOwnProps<Checked extends CheckedState> {
     /**
      * The controlled checked state of the checkbox.
@@ -31,7 +32,7 @@ interface CheckboxOwnProps<Checked extends CheckedState> {
      */
     onCheckedChange?: (checked: Checked) => void;
 }
-export interface CheckboxProps<Checked extends CheckedState> extends Omit<BezierComponentProps<'button'>, keyof CheckboxOwnProps<Checked>>, ChildrenProps, FormFieldProps, CheckboxOwnProps<Checked> {
+export interface CheckboxProps<Checked extends CheckedState> extends Omit<BezierComponentProps<'button'>, keyof CheckboxOwnProps<Checked>>, ChildrenProps, FormFieldProps, SizeProps<CheckboxSize>, CheckboxOwnProps<Checked> {
 }
 export {};
 //# sourceMappingURL=Checkbox.types.d.ts.map

package/dist/types/components/Checkbox/Checkbox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,0BAAyB;AAE1B,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAA;AAEpD,UAAU,gBAAgB,CAAC,OAAO,SAAS,YAAY;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7C;AAED,MAAM,WAAW,aAAa,CAAC,OAAO,SAAS,YAAY,CACzD,SAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAC3E,aAAa,EACb,cAAc,EACd,gBAAgB,CAAC,OAAO,CAAC;CAAG"}
+{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,0BAAyB;AAE1B,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAA;AAEpD,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,CAAA;AAEpC,UAAU,gBAAgB,CAAC,OAAO,SAAS,YAAY;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7C;AAED,MAAM,WAAW,aAAa,CAAC,OAAO,SAAS,YAAY,CACzD,SAAQ,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAC3E,aAAa,EACb,cAAc,EACd,SAAS,CAAC,YAAY,CAAC,EACvB,gBAAgB,CAAC,OAAO,CAAC;CAAG"}

package/dist/types/components/Checkbox/index.d.ts

@@ -1,3 +1,3 @@
 export { Checkbox } from './Checkbox';
-export type { CheckboxProps, CheckedState } from './Checkbox.types';
+export type { CheckboxProps, CheckedState, CheckboxSize, } from './Checkbox.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,YAAY,GACb,MAAM,kBAAkB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -63,7 +63,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@channel.io/bezier-icons": "0.45.0",
+    "@channel.io/bezier-icons": "0.47.0",
     "@chromatic-com/storybook": "^3.2.2",
     "@figma/code-connect": "^1.2.4",
     "@rollup/plugin-alias": "^5.1.1",

package/src/components/Checkbox/Checkbox.module.scss

@@ -23,8 +23,6 @@
   box-shadow: inset 0 0 0 2px var(--bdr-black-dark);
 
   /* stylelint-disable-next-line order/order */
-  @include dimension.square(18px);
-
   @include interaction.touchable-hover {
     &:where(:not([data-disabled], [data-state='unchecked'])) {
       background-color: var(--bgtxt-green-dark);
@@ -35,6 +33,17 @@
     }
   }
 
+  &:where(.size-s) {
+    border-radius: 4.6px;
+
+    /* stylelint-disable-next-line order/order */
+    @include dimension.square(16px);
+  }
+
+  &:where(.size-m) {
+    @include dimension.square(18px);
+  }
+
   &:where([data-disabled]) {
     background-color: var(--bg-black-dark);
     box-shadow: none;

package/src/components/Checkbox/Checkbox.tsx

@@ -37,7 +37,6 @@ const CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(
         className={styles.CheckIcon}
         ref={forwardedRef}
         source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}
-        size="xs"
         color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}
         {...props}
       />
@@ -46,7 +45,7 @@ const CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(
 )
 
 function CheckboxImpl<Checked extends CheckedState>(
-  { children, className, checked, id: idProp, ...rest }: CheckboxProps<Checked>,
+  { children, className, checked, size = 'm', id: idProp, ...rest }: CheckboxProps<Checked>,
   forwardedRef: React.Ref<HTMLButtonElement>
 ) {
   const {
@@ -56,6 +55,7 @@ function CheckboxImpl<Checked extends CheckedState>(
   } = useFormFieldProps(rest)
 
   const id = useId(idProp ?? formFieldId, 'bezier-checkbox')
+  const iconSize = size === 's' ? 'xxs' : 'xs'
 
   return (
     <div
@@ -63,7 +63,7 @@ function CheckboxImpl<Checked extends CheckedState>(
     >
       <CheckboxPrimitive.Root
         asChild
-        className={classNames(styles.Checkbox, className)}
+        className={classNames(styles.Checkbox, styles[`size-${size}`], className)}
         ref={forwardedRef}
         id={id}
         checked={checked}
@@ -77,7 +77,7 @@ function CheckboxImpl<Checked extends CheckedState>(
             forceMount
           >
             {/* @ts-expect-error */}
-            <CheckIcon />
+            <CheckIcon size={iconSize} />
           </CheckboxPrimitive.Indicator>
         </BaseButton>
       </CheckboxPrimitive.Root>

package/src/components/Checkbox/Checkbox.types.ts

@@ -2,10 +2,13 @@ import {
   type BezierComponentProps,
   type ChildrenProps,
   type FormFieldProps,
+  type SizeProps,
 } from '~/src/types/props'
 
 export type CheckedState = boolean | 'indeterminate'
 
+export type CheckboxSize = 's' | 'm'
+
 interface CheckboxOwnProps<Checked extends CheckedState> {
   /**
    * The controlled checked state of the checkbox.
@@ -42,4 +45,5 @@ export interface CheckboxProps<Checked extends CheckedState>
   extends Omit<BezierComponentProps<'button'>, keyof CheckboxOwnProps<Checked>>,
     ChildrenProps,
     FormFieldProps,
+    SizeProps<CheckboxSize>,
     CheckboxOwnProps<Checked> {}

package/src/components/Checkbox/index.ts

@@ -1,2 +1,6 @@
 export { Checkbox } from './Checkbox'
-export type { CheckboxProps, CheckedState } from './Checkbox.types'
+export type {
+  CheckboxProps,
+  CheckedState,
+  CheckboxSize,
+} from './Checkbox.types'